Sass の基礎知識

Sass のことを説明するための資料です。

概要

• 公式: http://sass-lang.com/
• Syntactically Awesome Stylesheets (構文的にイケてるCSS) の略で、「サス」と読みます
• CSS を拡張したメタ言語 (Less, Stylus, Tass, PCSS などと同様)
• 拡張子は .scss
• scss のファイルをコンパイラで CSS構文に変換する（結果として.css のファイルを生成する）ことで使う

使用するためには、Ruby と Sass プログラムのインストールが必要です。

Sassのメリット

なぜSassを使うのかというと、CSSを単純に書くより、ずっと楽になるから、です。
まず、入れ子が使えます。

例えば、通常のCSSなら、セレクタを毎回書く必要があります。

#footer h1 {
    font-size: 20px;
}
#footer p {
    font-size: 12px;
}
#footer span {
    font-size: 10px;
}

上記の設定をSassで書くと以下になります。
これが「入れ子」です。

#footer  {
    h1 {
        font-size: 20px;
    }
    p {
        font-size: 12px;
    }
    span {
        font-size: 10px;
    }
}

どうでしょう。見た目にもすっきりして、関連性もはっきり分かるようになりました。
また、CSSでは、1行コメント（//）が使えませんが、Sassは使えるなど、
よりプログラミング的に使えるようになります。
また、変数や計算もできるんです。
初めてSass（正確にはLessでしたが）を知った時は、あんまり便利になるもので、興奮したものです。

現在、CSSのフレームワークの中には、Sass で記述されているものが少なくありません。
コンパイル後のCSSだけでなく、Sassも取得できると、フレームワークの根幹からメンテナンスできるので重宝します。

主な機能

• ネスト（入れ子）が使えるので記述が簡素化できる
• 1行コメントが使える
• 変数を使って同じ値を使いまわせる
• 色や値を操作するための多くの関数が用意されている
• 四則計算が出来る
• @extend を使うと同じセレクタを使いまわせる
• @mixin を使うとモジュールのように定義し、引数を指定することも出来る
• パーシャル機能で複数のSassファイルを一つにまとめることができる（HTTPリクエストを減らせる）
• 条件分岐などの制御構文が扱える
• if文や for文などの制御構文をサポートしている
• ファイルサイズ圧縮のため、minify(compress)されたファイルを出力できる
• 強力な compass フレームワークを使用できる。
• ヘルパー、レイアウト、タイポグラフィ、グリッドレイアウト、スプライトイメージなどの豊富な機能をサポートしている

次回は、インストール方法を紹介します。