Webデザイン 1-08
Sassを活用して効率よくCSSを記述する（後編）

CSS開発の生産性を劇的に改善できると話題になっているSass。ここではSassを使用することによってどんなメリットがあるのか、また具体的にどのように使うのかについて解説する。

制作・文／林俊之（NTTレゾナント株式会社）

05

次にミックスインについて解説する。ミックスインは Sassの最も強力な機能の一つだ。

CSSでは、一度定義したCSSの再利用は難しいのだが、Sassではミックスインを使うことでCSSの再利用が容易に可能となる。ミックスインを定義するには@mixinディレクティブを用いる【5-1】。そして@includeディレクティブで定義したミックスインを呼び出す。

またミックスインではJavaScriptの関数のように引数を取ることができるので、より使い回しが柔軟にできる【5-2】。このように複雑なグラデーションも一度定義してしまえば、後は一行で簡単に呼び出せるようになる。なお、これらは【5-3】のようなCSSとして出力される。

【5-1】@includeでミックスインを呼び出すことができる。

【5-2】ミックスインは引数を取ることも可能だ。

【5-3】【5-1】と【5-2】はこのように出力される。

06

次に既存セレクタの継承について解説する。既存のセレクタの再利用という点ではミックスインに近いかもしれない。

【6-1】の.testClass7を見て欲しい。@extendディレクティブで.testClass6を継承しているのがわかるだろう。なお、これを出力すると【6-2】のようになる。

.testClass7に対して@extend.testClass6;とすることで、元々あった.testClass6や.testClass6.subClassのセレクタにtestClass7が追加されているところがポイントだ。実際にこれを従来のように手動でやると煩雑な作業になるが、Sassでは論理的に簡潔に、かつ記述することができる。

ミックスインの場合、CSSに出力される際には@includeのところにコピーされるので、CSSファイルは肥大化してしまう。しかし、@extendを使ったセレクタの継承であればセレクタに追加しているのみなので、ファイル容量への影響は軽微だ。必ずしもミックスインを置き換えることができるわけではないが、うまく使い分けていこう。

【6-1】@extendで既存のセレクタの拡張ができる

【6-2】既存のセレクタに.testClass7が追加されている。

07

最後に制御構文について解説する。Sassでは他のプログラミング言語のように制御構文を使うことができ、if、for、each、whileの4種類の構文をサポートしている。if文を使うには【7-1】のように＠ifディレクティブを用いる。

【7-1】は【7-2】のように出力される。この例だとあまりメリットは感じないかもしれないが、たとえばミックスイン内で引数の値によってCSSプロパティの値を大幅に変更したい場合、ifの制御構文は役に立つだろう。

for文を使うには【7-3】のように＠forディレクティブを用いる。これにより指定した回数分だけ処理を繰り返すことができる。

【7-3】は【7-4】のように出力される。数値がインクリメンタルに変化する連番のようなclass名、一定の値で増減するプロパティの値を生成するときに便利だろう。

each文を使うには【7-5】のように＠eachディレクティブを使う（これは【7-6】のように出力される）。 for文と違い配列の中の値を変数に使うので、文字列の値も扱えるためfor文ではできないような処理も可能になる。例のように実際の画像名とclass名の一部が同じということはよくあるパターンだと思うが、each文を使うとシンプルに記述することができる。今回はwhile文は割愛するが、制御構文を使うことでより効率的に記述できるのでうまく活用しよう。

【7-1】@ifディレクティブでif構文を使うことができる。

【7-2】【7-1】の出力結果。

【7-3】#{}を指定するとセレクタにも変数を反映できる。

【7-4】【7-3】の出力結果。

【7-5】each文では文字列も扱える。

【7-6】【7-5】の出力結果。

いかがだっただろうか。Sassは、CSSを書いたことがある人であれば容易に理解できる内容であり、まさにCSSで欲しいと思っていた機能が実装されていると言えるだろう。特に大規模サイトのCSSの開発、メンテナンスでは強力なツールになるはずだ。今回紹介してない便利な機能がまだ多くあるので、さらに詳しい内容を確認したい方はオフィシャルのドキュメントを参照してみてほしい【8-1】。また、Sassとほぼ同様の書式でかけるlessというメタ言語（http://lessCSS.org/）もある。興味ある方はこちらもチェックしてみよう。

【8-1】Sassの公式サイト（http://sass-lang.com）

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。