sassのインポート機能を活用してコードをファイル別に管理する

最近、sassにもだいぶ慣れてきました。
コード管理をスマートにしてくれるsassですが、コードが大量になると流石に煩雑になりがちです。
そこで、大量のソースを複数ファイルに分割してインポートしてみます。

例えばsassの変数をまとめたファイル「_values.scss」を用意します。
ファイル名の先頭にアンダースコアを入れたものをパーシャルファイルといいます。
パーシャルファイルはsassコマンドを実行してもコンパイルされず、「values.css」は生成されません。importされる専用の外部ファイルとして扱われます。

$color-link: #2266bb;
$font-size-l: 2.0rem;

その他に、reset.cssの内容をまとめたファイル「_reset.scss」。

a{
	color: $color-link;
}

モジュールをまとめたファイル「_modules.scss」などを用意します。

.module01{
	font-size: $font-size-l;
}

次に「style.scss」でこれらパーシャルファイルをインポートします。
importでパーシャルファイルのファイル名のアンダースコアと拡張子を省略して指定します。つまり「_values.scss」をインポートする場合は「@import “values”;」と書きます。
ここで、普段CSSで利用している「@import」とは意味が異なることに注意しましょう。

@charset "utf-8";
@import "values";
@import "reset";
@import "modules";
.leftbox{
	float: left;
}

これで準備は整いました。
「style.scss」をコンパイルして生成した「style.css」の中味は以下の通りです。

@charset "utf-8";
a{
	color: #2266bb;
}
.module01{
	font-size: 2.0rem;
}
.leftbox{
	float: left;
}

ちなみに、パーシャルファイルはフォルダ毎に管理して、階層指定でインポートすることもできます。

@charset "utf-8";
@import "../common/values";
@import "../common/reset";
@import "../common/modules";
.leftbox{
	float: left;
}

さらにimportするファイル内で、別ファイルをimportすることも可能です。

大量のCSSコードを要する大規模サイトでも、このようにimportを活用して整理できれば、コーディングのストレスも減らせそうですね。