the mocuLog

CSSを書くならSassで書こう

By Leave a Comment

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記法でネスト

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

SCSS記法でネスト

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

Sassをビルドする

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

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

Sassのメリット

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

メリットの一部

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

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

まとめはこちら : CONTENTS

広告