Live Sass Compilerで複数のscssをコンパイルする方法について試してみました。

なぜファイルの分割管理するのか？

Sassファイルを用途や機能ごとに複数に分けて管理する事で、ファイル一つ一つの容量を小さくでき、目的のコードを見つけやすくなるメリットがあります。CSSをより効率的に管理し、コードの再利用性と保守性を向上させることができます。

@useや@forwardを使用してSassファイルをまとめる「style.scss」と、各フォルダに役割ごとに分割したSassファイルを用意し、複数のSassファイルから一つのCSSファイルをコンパイルします。

他のファイルをロードする

分割で管理するSassファイルは、ファイル名の先頭に「_（アンダースコア）」を付けます。

メンバーの参照

style.scssのコード

例えば、上記でのフォルダ構成のSassファイルを読み込む場合は、下記のようなコードになります。

@use 'config/mixin';
@use 'config/variable';

@use 'unit/header';
@use 'unit/footer';
@use 'unit/main';
@use 'unit/nav';

@use 'content/about';
@use 'content/top';

@use ' ディレクトリ名 / ファイル名 ';で、分割したSassファイルを読み込んでいます。
@useは、「@use」のあとにインポートしたいファイルを記述しますが、アンダーバー[ _]と「.scss」は省略して記述できます。

@useの使用例

▼_variable.scss

▼style.scss

_variable.scssは、共通のカラーやフォントなどを記述するファイルです。
style.scssで、_variable.scssに記述されている変数$blackにvariable.$blackでアクセスして使用しています。

コンパイルしたstyle.cssには、変数の値が入ったコードが出力されてます。

名前空間の変更

デフォルトの名前空間は読み込んだファイルの名前ですが、ファイル名が長い場合や同じ名前のファイルを読み込む場合は as を使って任意の名前空間に変更することができます。

また、毎回名前空間を記述するのが煩わしい場合は、as * と記述して、名前空間なしでモジュールをロードすることもできます。

【@useの問題点】２段階でファイルを読み込めない

例えば、_header.scssやfooter.scss、ページごとのscssファイルでも_mixin.scssや_variable.scssで定義した変数を使いたい場合。
style.scssで読み込んでいますが、二段階で名前空間に潜る構文は用意されていないため、そのまま使おうとするとエラーになります。

それぞれのscssファイルでも@useで呼び出すことで、使えるようになります。

▼_header.scss

この部分が解決できず、つまづきましたが、なんとか意図通りstyle.cssにコンパイルすることができました。

▼style.css

このように役割ごとにファイルを分割すると、修正が必要な場合に、該当箇所を見つけやすくなったり、変数部分だけ修正して全箇所に一気に修正を反映させることも可能になります。

これらの機能を使用すれば、大規模なサイト構築でも快適で高速なCSSコーディングができます。