Dart Sassでファイルを分割して管理する方法｜Dart Sass入門
Sassを使うメリットの1つに「ファイルの分割」が挙げられます。
普通にCSSで書く場合、style.cssのような1つのファイルに書いていくと、気がつけば数千行のコードになってしまい、縦の移動がかなり面倒になってしまいます。
かといって細かくCSSを分けたりすると、どのページでどのCSSを読み込んでいるのか管理がややこしくなります。
また、CSSファイルを追加する度に関連ページのHTMLを修正する必要が出てきてしまうので、気軽に細かくファイルを分割できません。
もちろんルールを決めておけば問題なくなりますし、余計なCSSを読み込まなくて済むので良い方法ではありますが、Sassであればファイルを分割して最終的に1つのCSSファイルにまとめられるので、気軽に細かくファイルを分割していけます。
今回はDart Sassでのファイル分割方法についてまとめておきます。
Dart Sassのファイル分割方法
ファイルの分割
今回は「style.scss」ファイルに、分割したファイルをどんどん読み込んでいくのを想定して、下記のようなフォルダ構成を用意しました。
分割して、他のファイルで読み込むだけのファイルは、名前の先頭にアンダースコア（_）を入力します。
先頭にアンダースコアがついていると、そのファイルはコンパイルされなくなるので余計なCSSが生成されずに済みます。
# button.cssにコンパイルされる
button.scss
# コンパイルされない（他ファイルからの読み込み専用ファイルになる）
_button.scssこの機能を「パーシャル（partial）」と呼びます。
逆にアンダースコアを付けていないと、分割した分すべてのCSSが生成されてしまうので注意が必要です。
分割したファイルの読み込み
今度は分割したファイルの読み込みです。
読み込み元となるファイル（今回の場合はstyle.scss）を開いて、@useのあとに読み込みたいファイルのパスを指定すると読み込めます。
style.scss// base
@use "base/layout";
@use "base/mixin";
@use "base/reset";
@use "base/variable";
// common
@use "common/footer";
@use "common/header";
@use "common/main";
// module
@use "common/button";
@use "common/card";
@use "common/input";
@use "common/modal";
@use "common/pagination";
@use "common/table";
// page
@use "page/about";
@use "page/top";パーチャルを使っていたとしても先頭のアンダースコアは不要で、.scssの拡張子も不要です。
@importは古い書き方
Sassに関する記事を見ていると、ファイルの読み込みは@importで書かれているのを見かけるかもしれません。
これはLibSassなどの古いSassの書き方です。
Dart Sassでは@importは動かないので注意が必要ですし、逆にLibSassを使うときは@useが使えません。
Dart SassとLibSassの違いなど、細かいことは過去に記事にしているので、そちらをご覧ください。
2つ以上前のファイルで定義されている変数を利用したい場合
少しややこしい話になるのですが、Sassでは変数をファイル内で定義して使えます。
別ファイルで定義している変数を使いたい場合に、定義されているファイルを直接読み込んで使う場合は@useで問題ありません。
しかし、読み込むファイル先でさらに別ファイルを読み込んでいて、そこで変数が定義されている変数を使いたい場合は、@useではその変数は利用できません。
2つ以上前のファイルで定義されている変数を利用したい場合は@forwardというものを使います。
@forward "base/button";
