プライマリSCSSファイル2011年12月11日Sassでは@importをうまく使うと、SCSSファイルを目的別に整理して管理することができます。モジュール化できるということですね。プライマリSCSSファイルとは僕が勝手に付けた呼称ですが、つまり各モジュールを読み込むだけのSCSSファイルのことです。グローバルに使用する変数の設定ファイルなども含めて整理して、プライマリSCSSファイルではそれらを読みこむだけとしておくと管理が少し楽になるんじゃないかと。このWebサイトのプライマリSCSSファイルは以下のようなものです。"forprint";短いですね!/*!...*/を使ったコメントの保護と変数のインターポレーション/*!...*/を使うと出力形式としてcompressedを指定していても、出力CSSにコメントを残すことができます。バージョン番号やライセンス情報など出力CSSにも必要なものはこれを使って保護すると良いでしょう。/*!...*/の中ではSassの変数を展開(インターポレーション)することが可能です。上記例ではバージョン番号を変数として定義しておき、コメント内で#{$version}とすることによって展開させています。この例はあまり意味がない感じですけど......。CSSの@importルールCSSの@importルールはCSSの最初にあらゆるCSSルールに先駆けて記述しなくてはならないので、プライマリSCSSファイルに書く必要があります。Fontsの読み込みなどで使ったりもします。partialsなどを利用する場合、そのpartial向けに設定を行う必要が出てくることがあります。Sassの仕様上、partialを読み込む前に変数設定を行わなければならないので、変数定義ファイルはそれらpartialの読み込みより前で読み込まないとなりません。partialを読み込みます。SCSSの@importではカンマで区切って複数のパラメーターを取ることができるので、まとめて一気に読み込んでも良いでしょう。自分で書くSCSSファイル最後に自分で書くSCSSファイルを読み込みます。僕は基本的な装飾とレイアウト、そして局所的に使うウィジェットという3つに分けて管理しています。これらに加えて印刷向けのスタイルも@importで読み込んでいますが、これはあまり真似しないほうが良いでしょう。実際に全てのケースでこう細かくモジュール化する必要があるわけではありません。変数が数個しかないのならプライマリSCSSファイルに直接書いても良いでしょう。自分で書くスタイルも数10行程度ならそれもプライマリSCSSファイルに書いた方が編集効率が上がるかもしれませんね。partialはもうライブラリと呼ぶことにしようかな......。CC/BYTwitterRSSながしまきょう。