SCSSとSASSは、CSSを使用する人にとって、耳にする機会が多い言語ではないでしょうか。効率的なコーディングを行う上で、便利であるという評価を知っているものの、まだ触れたことがないという人もいることでしょう。使いはじめるとすっかりその便利さにはまってしまうと思いますので、ぜひ触れておきたいところです。今回はSCSSとSASSにスポットをあてて、2つの違いや書き方、導入方法など必要となる基本的な知識をまとめました。コーディングに対する認識が大きく変わるかもしれません。これから入門を検討されている皆様のお役に立てていただければ何よりです。

SCSS／SASSとは

SCSSとSASSは、Sass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。Sassはハンプトン・キャトリン氏が設計、ネイサン・バイゼンバウム氏が開発したものとして知られています。SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSの場合、長く複雑になってしまう記述であっても、わかりやすくシンプルに書けるというところが特徴です。小規模のホームページの制作では、コーディングにそれほど手間に感じなかったとしても、規模が大きくなるとその手間はとても大きなものになるでしょう。コードを見直すのも大変ですし、やはりシンプルさは重宝します。それでは、効率的でありシンプルなSCSS／SASSには、具体的にどのようなメリットがあるのでしょうか。以下にピックアップしました。

ネスト（入れ子構造）が利用できる

CSSとのもっとも大きな違いでもありますが、ネスト（入れ子構造）による記述が可能なため、記述量を減らすことができます。そして、ネストにより記述がわかりやすくなるのです。一箇所に記述がまとまることでCSSを読むよりも見落としが少なくなるでしょう。

変数が使える

変数は繰り返し使うカラーコードなどを定義すれば、何度でも簡単に利用できる機能です。変数を使えば、修正が生じても最小限の修正量で作業が済むので効率的です。変更がよく生じるところや、何度も記述するしなければいけない部分に利用します。

mixinが使える

@mixinを使えば、コードの塊を作っておいて、別のところから呼び出すことが可能になります。修正が必要な場合は、この塊のコードを変更するだけですので修正作業の効率化にとても役立ちます。

スタイルシートを分割できる

これは管理上において大きなメリットです。あとで確認や修正を行う際、スタイルシートがわかりやすく分割されていると、すぐに目的のファイルを見つけることができます。修正したい部分を見つけるまでの労力の大きさに悩んでいる方には大きな改善となるでしょう。

条件処理や関数が使える

条件分岐や繰り返しなどの制御が可能です。そのため、少ない量のコード記述でも連続した処理など、色々なことができます。

コメントが2種類ある

SCSS／SASSは、CSSと同じ書き方でコメントを入れることができます。SCSS／SASSならではのコメントの書き方もありますが、それはコンパイルをすると消えます。用途によって、上手に使える機能です。

上記のように色々なメリットをご紹介しましたが、一つだけSCSS／SASSを使う場合ならではの必須作業が存在があります。実は、SCSS／SASSは記述しただけでは利用できず、コンパイルが必要になります。コンパイルには手間がかからないので問題ありませんが、必要であることだけは覚えておいてください。