CSSを書くならSassで書こう

Sass（サースもしくはサス）はSyntactically Awesome StyleSheetsの略で、「構文的で素晴らしいスタイルシート」のような意味合いです。
CSSに条件分岐やループなどのプログラミング的要素を加えたもので、SASS記法とSCSS記法をサポートしています。

Sassを使えば、CSSの使い回し部分をの置き換え、CSSの簡略化、CSSファイルの実行速度を上げる、などさまざまな恩恵が得られます。
そして世界中で最も使用されていると思われるCSSプリプロセッサがSass。
CSSを書くならSassで書くことをおすすめします。

SCSS記法でSassを書く

リリース当初のSassは波括弧を使わず、インデントでネストを表現していたSASS記法がのみをサポートしていたが、Sass3.0からSCSS記法がサポートされました。
SCSSはSassy CSSの略で「魅力的なCSS」 みたいな意味です。ブロックの書式の構文でCSSと完全互換です。

SASSとSCSSの記法の違いは以下のような感じです。
（Sassのコンパイルに関しては次回。）

SASS記法でネスト

ul
  margin: 1em
  li
    padding-left: 1em

※インデントでネストを表現

SCSS記法でネスト

ul{
  margin: 1em;
  li{
    padding-left: 1em;
  }
}

※波括弧のブロックの書式でネストを表現

Sassをビルドする

ul{
  margin: 1em;
}
ul li{
  padding-left: 1em;
}

※出力結果はどちらも同じ。

SassはSASS記法とSCSS記法をサポートしているため、「SASS？」「SCSS？」と混乱することもしばしば。
SassをSCSS記法で書くのが一般的で、共有されているSassはほぼSCSS記法で書かれています。リソースの共有やレッスン系はSCSS記法がベースとなるので、これからSassを覚えるならSCSS記法一択です。

Sassのメリット

複数のブラウザをサポートする案件では、CSSプリプロセッサを利用して規則的なCSSのベンダープリフィクスを付与する機会も多いです。ほかにも記述の簡略化や部品化、再利用など得られる恩恵は多岐にわたります。

メリットの一部

• 条件分岐やループなどのプログラミング的要素
• ネスト（入れ子）による記述の簡略化
• コードの部品化・再利用
• ファイルの分割、分割したファイルの結合
• ベンダープリフィクスを含むミックスイン

次回「 Sassの初期設定〜コンパイル」

まとめはこちら : CONTENTS