Sass の @import ルール

Sass の @import ルール は CSS ファイルだけではなく Sass ファイルもインポートできる。この機能は地味に見えるが、実際に使ってみるとものすごく便利。とくに、ミックスインをモジュールとしてファイルに分割しておき、必要に応じて呼び出すような場面でその便利さを痛感する。

例として、opacity プロパティのクロスブラウザ対応コードのミックスインを考えてみる。まず以下のようなコード片を _opacity.scss というファイル名で用意しておく:

// _opacity.scss

@mixin opacity($alphavalue) {
    opacity: $alphavalue;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{ $alphavalue * 100 })"; // for IE 8
    filter: alpha(opacity=#{ $alphavalue * 100 }); // for IE 5-7
}

こういったモジュールとしてインポートして使う Sass ファイルは、それ単独で CSS にコンパイルする必要がない。そんなときはファイル名の先頭に _ (アンダースコア) をつけておく。そうすると、ディレクトリごと --watch していてもそのファイルは単独ではコンパイルされない。

で、このファイルをメインの Sass ファイルからインポートすれば、opacity ミックスインを利用できる。なおその際、ファイルの拡張子と先頭のアンダースコアは省略可能:

// style.scss

@import "opacity"; // _opacity.scss をインポート

.opaque {
    @include opacity(0.8); // opacity ミックスインを参照
}

最後にこのメインの Sass ファイルをコンパイルすれば以下のような CSS が出来上がる:

/* style.css */

.opaque {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}

ちなみに、ひとつの @import ルールで複数の Sass ファイルをいっぺんにインポートすることもできる:

@import "reset", "fonts", "css3/border-radius";

どれだけ細かくファイルを分割しても最終的に 1 枚の CSS ファイルにコンパイルできるので、CSS の @import ルールとは違って HTTP リクエストの増大を気にする必要はない。

また、CSS の @import ルールは @charset ルールをのぞくすべてのルールに先行していなければならないが、Sass の @import は場所を選ばない。たとえば、CSS の末尾に記述されることの多い印刷用スタイルやモバイル用スタイルなどを別ファイルとして用意して Sass の最後にインポートする、といったことも容易だ。

このように、Sass は CSS の @import ルールが抱える問題の多くを解決し、スタイルシートのより柔軟な設計・開発・管理をサポートしてくれる。