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
コメントを残す