Sassの応用：importを活用してファイル分割管理する

クロスドメインの関係で、全く同じ内容のCSSをほんの一部だけ書き換えて別のファイルに分離させるなんて事がありました。

普通ならばCSSの二重管理になるので避けるべきですが、SassでCSSを出力していれば若干の工夫で楽に対処できますし、基本の設計次第ではポンポン切り分けることも楽なのでメモしたく思います。

ファイル構成

最終的に下記のようなファイル構成になることを想定します。

scss
├_valiables.scss
├_mixins.scss
├_commonClass.scss
├_layout.scss
├site1.scss
└site2.scss
css
├site1.css
└site2.css

ファイル名の頭に「_」を付けることでSassはcssファイルに出力しなくなります。
そのためscssフォルダのファイル4点は「共通利用できる設定ファイル」の役割を果たします。

それぞれ下記の設定とします。

site1.css、site2.cssへの書き出し

実際に出力するための「site1.scss」「site2.scss」の中身は下記です。

site1.scss

@charset "utf-8";
@import "valiables";
@import "mixins";
@import "compass";
// site1 value
// ---------------------
$domain: "http://www.example1.com";
$mainColor: #06c;
@import "commonClass";
@import "layout";

「_」付きのscssファイルは@importの際に「_」と拡張子抜きで読み込めます。
valiablesとmixinsはSass記法で使う変数とmixinのみが格納されているので、importしてもCSS側に出力されず、読み込んだscss内で設定を利用できます。

site2.scss

@charset "utf-8";
@import "valiables";
@import "mixins";
@import "compass";
// site2 value
// ---------------------
$domain: "http://www.example2.com";
$mainColor: #0c6;
@import "commonClass";
@import "layout";

「site2.scss」もほぼ同じ内容で、設定を一部変えています。
両者で読み込んでいる「_layout.scss」に下記のような記述があったとします。

_layout.scss

$domain: "http://www.example.com" !default;
$mainColor: #c60 !default;
.back {
  color:$mainColor;
  background: url(#{$domain}/img/example.png);
}

上記の変数箇所のみが書き換えられ、site1とsite2それぞれのCSSが生成されます。