Sassを使ってCSSを書こう

この度、Gihyo Digital Publishingでは電子書籍「Sass入門～より効率的なCSSコーディング」を刊行しました。

Sassとは？

書名に入っている「Sass」とは何でしょうか。簡単に説明すると、Webページをデザインするときに使うのがCSSですが、それをもっと簡単に書くための言語がSassです。

SassはCSSの文法を拡張した形で記述できるため、CSSを書き慣れた人であればとても簡単にSassを使い始めることができます。

そしてSassでは、CSS自体にはない変数や関数などが使えるため、CSSを効率的に書けるとても便利な言語なのです（CSS本体でも変数の仕組みを導入しようとする動きがありますが、一般的に利用できるまでにはまだ時間がかかるでしょう⁠）⁠。

電子書籍の製作にも使われている

一例を挙げてみましょう。本書は電子書籍です。この電子書籍はEPUB3というフォーマットで製作・販売されているのですが、EPUB3のデザインにはCSS2.1がベースとして使われます。CSS2.1ということはSassが利用できるということです。そのため、Sassを利用することで効率的にCSSを組んでいます。

例えば、書籍をデザインする場合には一般的にキーカラーを決めますが、本書の場合はこのキーカラーを決めた上で、明度を調整した4つのカラーを足した、計5つのカラーの組み合わせを1つのカラーセットとして使っています。

Sassでこのキーカラーのカラーセットを書くと次のようになります。各行、:の前の$からはじまる文字列（例えば$key-color）がカラー変数となります。この変数の初期値を:の後に実際のCSSの形式で指定します。

キーカラーのカラーセット例

$key-color: #AA4298;
$key-color-light: #DB9DCE;
$key-color-super-light: #ECCCE6;
$key-color-dark: #7E306F;
$key-color-super-dark: #481C40;

最初にこのようなカラーセットをつくることで、色を指定したい要素（セレクタ）では次のようにカラー変数のどれかを値として指定する形で記述できます。

変数指定の例

h2 {
color: $key-color;
}

ここで、たくさんのプロパティで特定のカラーの値を指定しているCSSを考えてみてください。もしもCSSのみを利用している場合、変数ではなく実際の値を指定しているため、カラーを変えようとすると、すべてのプロパティの値を修正する必要があります。それに対してSass（つまり変数）を利用している場合では、後で修正を入れる場合にも非常に楽になるのが分かります。変数の箇所で指定した実際の値の部分を変えるだけで済みますからね。

このように変数の利用だけとって見ても、Sassが便利であることを実感できるかと思います。

もちろん、変数以外の用法も解説

変数以外にも、本書「Sass入門～より効率的なCSSコーディング」ではSass特有の書き方であるネストやミックスイン、Extendなどに加え、Sassを利用した実用サンプルや運用スタイル、デバッグまで紹介しています。

CSSはおおよそ理解していて、Sassを使ってみようかなと思ったあなた。ぜひSassのイロハを本書で学習してみませんか。

Sass入門～より効率的なCSSコーディング～

上村光星、富田梓、對馬慶子、山田敬美　著
WEB・EPUB形式

技術評論社電子出版サイト Gihyo Digital Publishing: URL：http://gihyo.jp/dp/
ご利用の際は、まず会員登録から！