今まで作成してきたエントリーをまとめてみました。ライブラリ化についても言及しています。Sass の機能的に書いてないものもあるので、今後追加するかも。よく一緒に紹介されるCompassについては言及していませんのでご注意を。

Sassって何？

Sass とは、よりプログラミングに近い書き方ができる言語です。今まで書いていた CSS の書き方を見てみましょう。

div.container h1 {
    color: orange;
    font-size: 20px; }
div.container li {
    font-size: 20px;
    color: blue; }

これが、 Sass を使うとこうなります。

div.container {
    $font-size: 20px;
    h1 {
        font-size: $font-size;
        color: orange;
    }
    li {
        font-size: $font-size;
        color: blue;
    }
}

Sass を使うと、セレクタを入れ子で書くことができます。直感的でコードが見やすくなりますね。そしてさらに変数を使用して、「 font-size 」プロパティを設定しています。これで一括して数値を設定することができます。例にはありませんが、足し算や引き算などの四則演算も使えるので、ボックスの幅の計算などもその場でできてしまいます。
　
このように、 Sass とは「より効率的に CSS を書くための言語」です。

※厳密に言えばメタ言語です。

Sass の導入

Sass をまずは使えるようにします。どんなことができるようになるのか先に知りたい！という方は飛ばして頂いて大丈夫です。もし、「使ってみようかな」と思って頂けたら是非立ち戻ってインストールする際に参考にしてみてください。

　
「Sassの導入と使用方法」インストールする際の概要です。
「Sass導入 – Windows7 + Sass」詳細にインストールについて書いています。
「超便利！Sassのコンパイルを楽にしよう！ – watchを使う」コンパイルを自動で行う方法です。

マークアップについて

CSS を直接書くよりも、Sass を使うことですっきりとマークアップすることができます。 CSS と Sass の比較を見て、どんなメリットがあるのか見ることができます。

　
「Sassを使うとコードが分かりやすくなる？ – ネスト化を利用しよう」
「Sass：隣の要素をまとめるCSSの書き方（ + ）と比較してみた」

変数について

数値や文字列などを「変数」と言われる箱に保管して、色んなところで使いまわしたり計算させたりする方法を紹介しています。計算がその場でできるようになるだけで、幅の計算ミスでカラムが落ちたり……なんてことはもう無くなりますね。

　
「Sassを使って2カラムのサイトを簡単に作ろう」
「Sassを使って3カラムのサイトを簡単に作ろう」
「SassでCSSテクニックを蓄積する – !defaultを使う運用の意味」
「Sassで使える変数名や@mixin名 – CSS3をオーバーラップする」
「Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう」
「Sassで”不要なCSS”を出力しない – nullの使い方」

ループ、条件分岐について

同じような動作や書き方を、繰り返し処理(ループ)によって一気に書きだすことができます。また、「この状態だったらこうしたい」「あの状態だったらこうしたい」と、条件によって動作を変えることができるようになります。

　
「Sassで更にコードを短く！ – アイコンをループで並べる」
「Sassで使用するベンダープレフィックスだけを出力する – @ifを使う」

@mixin について

この CSS の設定はよく使うなぁ、というものは @mixin によってまとめることができます。まとめた処理は今作っているWEBサイト制作はもちろん、他のWEBサイト制作で使いまわすことができます。(ノウハウを蓄積できる)

　
「Sassで角丸の矩形を超簡単に記述する方法」
「Sassを使って矢印を描こう – CSSテクニック」

@function について

@mixin と少し似た @function の紹介です。計算処理などをまとめるときは @functiuon を使います。

　
「Sassの@functionの使い方まとめ – プログラマブルな処理は@function」
「SassでHSLAをRGBAに変換する – JavaScriptの記述を減らす！」
「SassでRGBA値を16進数のカラーコードに変換する – @function使い方」

可変長引数について

@mixin 、 @function の使い方が分かってきた後に読んでください。 CSS では、プロパティに連続して値を設定することができます。このように連続した値で、何個設定するか分からない場合は @mixin にどうやって値を渡すのが良いのでしょうか。 Sass ではこういった時のために、可変長引数というものが用意されています。

　
「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」
「Sassの可変長引数で出来ること出来ないことまとめ」
「Sassを使えばbox-shadowのベンダープレフィックスコピペが要らない！」

その他の機能について

Sass には、今まで紹介した機能の他にも便利な機能があります。それらの機能を紹介してみます。

　
「Sassの@contentの使い道とは？ – @contentの実験と結果」
「Sassはオブジェクト指向なのか？ – @extendとその他言語から見えたもの」

ライブラリ化について

Sass を使っていると、便利な処理やよく使いまわす処理が出来上がってきます。こういった便利な処理は自分専用のライブラリとして蓄積していきましょう。

　
「SassでCSSテクニックを蓄積する – @importを使う」
「Sassで未対応ブラウザへのCSS3使用は警告＆自動修正！」
「MTRLib α版 – Sassで未対応ブラウザへのCSS3使用は警告＆自動修正！」
「ベンダープレフィックス不要！Sassで自動設定する方法」
「Sass：CSSで描く図形13種をたった一行で書けるようにしてみた」
「Sass：CSSで描く図形36種をたった一行で書けるようにしてみた」

間違いとかあればTwitterにて教えてくれると助かります。