Sass (SCSS/SASS)って便利だな！コーディングするなら、絶対得するSassを使ってみよう！

広く普及しているSassですが、コーディング初心者からすると、ちょっと敷居が高いという印象があります。私も、やり始めるまでは、ソースを見ただけで、げんなりした記憶があります。でも、使ってみるとその便利さに、驚きます。今ではSassなしのコーディングは考えられません。
そこで、今回はまだSassを使っていないみなさんに、Sassを使用するメリットをご紹介したいと思います。

Sassとは、CSSを拡張して扱いやすくしたスタイルシートのことです。
「Syntactically Awesome StyleSheet」の略で、直訳すると「構文的にすごいスタイルシート」です。その名の通り、cssコーディングをスピーディーにわかりやすくしてくれる素晴らしいスタイルシートです。

Sassには、SCSS記法とSASS記法の2つの記述法があります。
両方ともネスト（入れ子）で記述できるという点は同じですが、SCSSがセレクタやクラスの後に波括弧「{}」で囲うのに対し、SASS記法は「{}」を使わず、「; 」を省略した簡素な記法です。インデントのみで表記します。最初につくられたのはSASSですが、一般的にSCSS記法の方が広く普及しています。今回の説明もSCSSで行います。

※Sassはコンパイル(プログラミング言語で書かれたソースコードを解析し、コンピュータが直接実行可能な形式のオブジェクトコードに変換すること)して、cssにしてからhtmlに読み込んで使います。テキストエディタで自動でコンパイルされる場合もありますが、そうでない場合は「Sass　コンパイル 方法」などで検索して、環境に合わせた方法をみつけてください。

1：視覚的に構造がわかるから、修正が楽（ネスト記述の効果1）

Sassのいちばんの特徴はネスト（入れ子）です。
ネストして記述することによって、コードを書いていくときのスピードが上がり、その後の修正も速やかにできるようになります。

では、親要素から子要素へとネストされる様子を、実際のコードで見てみましょう。

どうでしょう？視覚的にスタイルシートの構造がわかるようになったと思います。
実際にはいろいろな要素が入り込み、こんなに単純ではありませんが、エディターでソースを折りたたんで必要な部分だけをみることができるので、長いソースでも問題ありません。

2：レスポンシブ対応コーディングが簡単になる（ネスト記述の効果2）

通常、「レスポンシブ コーディングをしよう！」となると可変するブラウザの幅に対応するスタイルシートを記述する必要があります。ブラウザ幅ごとに対応するスタイルシートを記述するためにメディアクエリを使いますよね。

上の図をご覧ください。
左がCSSでのソースです。CSSではネストが使えないため、メディアクエリを書く場所が、別のCSSファイルだったり、離れた場所に記述することがよくあります。そのため、同じセレクタに指定したスタイルがブラウザ幅ごとに、どうなっているのか非常にわかりにくい構造です。
対して、右のSassをご覧ください。ぱっと見で、「ブラウザ幅が768px以下の時、幅は100%」ということがわかると思います。
cssではブラウザ幅毎の設定を比較するのに、ファイルの上から下まで行ったり来たりで、自分の見たい場所をさがすことにも一手間かかりました。
この労力から解放されるだけでも、Sassを覚えるメリットは十分あります。

3：アンパサンド（＆）の素晴らしさ

Sassを使わない方はアンパサンド（＆）って何？という感じだと思います。
「&」の記号のことですが、このアンパサンドがSass の肝です。アンパサンドにはさまざまな使い方がありますが、その全てを使わなくても、基本的な使い方をマスターするだけで、素晴らしく効率がアップします。
ちなみに、アンパサンドとは、セレクタ自身を指します。

例3はアンパサンドの前にセレクタやクラスなどを記述することで、特定の親要素を指定しています。子要素から親要素も参照できるなんて、便利ですよね。

そのほかにも様々な用法がありますが、ここでは説明しきれません。この時点で、興味を持たれた方も多いのではないでしょうか。

4：mixinで便利さ倍増

Sassでは、よく利用するCSSのスタイルを定義しておいて、別の場所で使い回せるようにすることができます。その機能をmixinといいます。同ファイル上に書いてもいいですが、別ファイルにしてimportで読み込むことで、よりわかりやすく便利に使えます。

細かい説明は割愛しますが、例では、break()というmixin名で「コンテンツ幅が768pxよりも小さい場合のスタイルシートを指定します」と定義しています。その定義した名前をSassから「@include break()」で呼び出しています。
mixinで定義した名前はSass上で「@include定義名」で呼び出して、使用します。この定義名はどこからでも参照でき、記述も短いので非常にわかりやすいコード展開になります。
今回はメディアクエリを例に出しましたが、よく使うスタイルのパターンを塊で指定して使うこともできますし、引数を利用して値を変えながら使用することもできます。

まとめ

最後は少しだけ複雑な話になりましたが、ネストとアンパサンドだけでも十分コーディングがスムーズになります。
今回は、簡単な説明でSassの便利さをご紹介しましたが、他にも変数や条件処理などが使えます。
興味を持たれた方はSassを取り入れてみてはいかがでしょうか。きっと、コーディングがもっと効率的になります！

おまけ
Sassに慣れてくると、「CSSで記述していたサイトの更新もSassで行いたい！」という気持ちになることがよくあります。そんなとき役に立つのがCSS/Sass変換サイトです。
http://css2sass.herokuapp.com/
こちらでは、CSS→Sass（SASS or SCSS）の変換ができます。元となるCSSによってはうまくネスト構造にならない場合もありますが、変換後は、新しく記述する部分に関してはSassコーディングですすめることができます。

WEBデザイナー ／ Y.E