プライマリSCSSファイル

Sassでは@importをうまく使うと、SCSSファイルを目的別に整理して管理することができます。モジュール化できるということですね。プライマリSCSSファイルとは僕が勝手に付けた呼称ですが、つまり各モジュールを読み込むだけのSCSSファイルのことです。グローバルに使用する変数の設定ファイルなども含めて整理して、プライマリSCSSファイルではそれらを読みこむだけとしておくと管理が少し楽になるんじゃないかと。

このWebサイトのプライマリSCSSファイルは以下のようなものです。

$version: "6.10.21";

/*!
 * style.css v#{$version}
 *
 * LICENSE: http://hail2u.mit-license.org/2011
 */

// Web Fonts
@import url("http://fonts.googleapis.com/css?family=Terminal+Dosis");

// Variables
@import "vars";

// Partials
@import "normaliz", "clearfix", "vendor-extension";

// Styles
@import "basics", "layout", "widget", "forprint";

短いですね！

/*!...*/を使ったコメントの保護と変数のインターポレーション

/*!...*/を使うと出力形式としてcompressedを指定していても、出力CSSにコメントを残すことができます。バージョン番号やライセンス情報など出力CSSにも必要なものはこれを使って保護すると良いでしょう。

また/*!...*/の中ではSassの変数を展開(インターポレーション)することが可能です。上記例ではバージョン番号を変数として定義しておき、コメント内で#{$version}とすることによって展開させています。この例はあまり意味がない感じですけど……。

CSSの@importルール

CSSの@importルールはCSSの最初にあらゆるCSSルールに先駆けて記述しなくてはならないので、プライマリSCSSファイルに書く必要があります。Sassを使う場合CSSの@importルールが必要となるケースはあまりないですが、上記例のようにGoogle Web Fontsの読み込みなどで使ったりもします。

変数定義ファイル

他の人が作ったSCSS partialsなどを利用する場合、そのpartial向けに設定を行う必要が出てくることがあります。Sassの仕様上、partialを読み込む前に変数設定を行わなければならないので、変数定義ファイルはそれらpartialの読み込みより前で読み込まないとなりません。

partialでユーザーの定義した変数による設定を可能にする!defaultについては数日後にLESS & Sass Advent calendar 2011で書きます。

SCSS partials

次に自分や他人が作ったSCSS partialを読み込みます。SCSSの@importではカンマで区切って複数のパラメーターを取ることができるので、まとめて一気に読み込んでも良いでしょう。

自分で書くSCSSファイル

最後に自分で書くSCSSファイルを読み込みます。僕は基本的な装飾とレイアウト、そして局所的に使うウィジェットという3つに分けて管理しています。これらに加えて印刷向けのスタイルも@importで読み込んでいますが、これはあまり真似しないほうが良いでしょう。

実際に全てのケースでこう細かくモジュール化する必要があるわけではありません。例えば変数が数個しかないのならプライマリSCSSファイルに直接書いても良いでしょう。自分で書くスタイルも数10行程度ならそれもプライマリSCSSファイルに書いた方が編集効率が上がるかもしれませんね。

partialはもうライブラリと呼ぶことにしようかな……。