Dart Sassでファイルを分割して管理する方法｜Dart Sass入門

2022年8月9日

著者：サイトウマサカズ

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の拡張子も不要です。