3.5.1SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Basics」に沿ってご紹介します。構文をSCSSに絞り、解説はわかりやすく改めて、参考のリンクも加えました。Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。使えるようにするには」をお読みください。変数に納めた値は、スタイルシート全体で使い回せます。変数の値を変えると、変数で与えたプロパティの値もすべて書き替わるのです。Sassの変数は$記号を頭につけて定めます。SassをコンパイルしたCSSからは変数は除かれます。変数を参照したプロパティの値は、CSSでは変数値に書き替えられるのです。サイト全体で使うカラーやレイアウトの尺度などに、統一性や一貫性をもたせるのに役立ちます。ネスト(入れ子)HTMLは階層構造をつくって書きます。ところが、CSSには階層がなく、セレクタをつなげて示さなければなりません。SassではCSSのセレクタを入れ子(ネスト)にして、HTMLと同じように階層がつくれます。階層を深くしすぎたルールは、管理しにくくなるのでお勧めできません。つぎのSCSSは、<nav>要素の子孫要素にスタイルを定めています。子孫要素のセレクタは、親セレクタにネストできるのです。そのため、階層構造がわかりやすくなりました。CSSにコンパイルすると、親と子のセレクタをつなげて書き出されます。パーシャルSassファイルのスタイルの定めから、一部を別ファイルに切り分けることができます。スタイルを部品に分けることで、それらを組み合わせたり、管理がしやすくなるのです。分けたSassファイルをパーシャル(部分)と呼び、ファイル名の頭をアンダースコア(_)にすることで、CSSファイルにコンパイルされなくなります。パーシャルは別のSassファイルに読み込んで使うことになるのです。@importディレクティブパーシャルをSassのファイルに読み込むに用いるのは、@importディレクティブです。CSSにも部品分けした別のスタイルシートを読み込む@import規則があります。Sassはコンパイルのときパーシャルを読み込むので、書き出されるのはひとつのCSSファイルです。HTMLドキュメントに読み込むスタイルシートはひとつで済みます。前掲のパーシャル(_reset.sass)は、つぎのようにSassに読み込みます。@importディレクティブに与えるパーシャル名からは、先頭のアンダースコア(_)と拡張子を省いて構いません。コンパイルすると、パーシャルは読み込まれたSassにまとめられてひとつのCSSファイルとして書き出されます。@mixinディレクティブmixinはCSSの宣言をまとめて、サイトの中で使い回しするための仕組みです。使う値を変数で渡すこともできます。同じ組み合わせのCSSの定めに、違った値が与えられるのです。ベンダープレフィックスは、mixinが役立つ場合のひとつです。mixinは、@mixinディレクティブに名前を添えて定めます。つづくかっこ()に加えた変数で値が受け取れます。mixinのスタイルを取り込むのが@includeディレクティブです。mixinの名前を与え、渡す値はかっこ()に含めます。すると、mixinのスタイルが渡した値で定められるのです。基本のスタイルを定めたクラスに、いくつかの種類のオプションを備えたいことがあります。Bootstrapには、警告の基本スタイルのクラス(alert)があって、それに4つのオプションからひとつを加えてclass属性に定めます(「Alerts」参照)。すると、基本とオプションそれぞれのスタイルについて、修正や追加がしやすくなります。alert-danger">danger</div>図001■Bootstrapのクラスalertの例Sassでは、継承という仕組みによって、あるセレクタのCSSをそのまま別のセレクタの定めとして取り込むことができます。CSSを他のセレクタから読み込むのが、@extendディレクティブです。セレクタの宣言の中で、@extendのあとに継承するクラスなどのセレクタを与えます。コンパイルすると、継承もとのセレクタのスタイルが、継承したセレクタにも定められます。継承もとセレクタのCSSを書き替えれば、コンパイルされる継承先セレクタのスタイルも変わります。要素にスタイルを定めるとき、class属性に与えるクラスはひとつで済むのです。演算Sassでは、加減乗除や剰余(%)などの演算ができます(「Operations」参照)。コンパイルしたCSSに定められるのは、計算結果の値です。31.25%;}同じ計算結果を複数の定めに使う場合には、変数と組み合わせることもできます(コンパイルされるCSSは前掲と同じ)。$width-ratio;}同じ内容の計算を異なった値について何度も行う場合には、mixinを使うことも考えられます。