SassはCSSのメンテナンス性と再利用性を向上させるための強力なツールです。しかし、その全ての機能を最大限に活用するためには、ファイルの管理方法や、モジュールシステムの理解が不可欠です。この記事では、Sassのファイル名の先頭にアンダーバーを付ける慣習、@useと@forwardディレクティブの使い方、そして名前空間の管理について解説します。
Sassでは、ファイル名の先頭にアンダースコア(_)を付けることで、そのファイルが部分的なファイル（パーシャル）であることを示します。パーシャルは、他のSassファイルによってインポートされることを意図していますが、単独でコンパイルされることはありません。これにより、複数のスタイルシートをモジュール化し、プロジェクトをより管理しやすくすることができます。
Sassの@useルールを使うと、他のファイルの変数やミックスイン、関数などを読み込んで使用することができます。\n※ @importは古い書い方なので使わないこと。
_mixin.sass
\n@mixin second-color($color, $fWeight) {\n color: $color;\n font-weight: $fWeight;\n cursor: pointer;\n}@use \"mixin\";\n\n.container {\n @include mixin.second-color($color: 'yellow', $fWeight: 'bold')\n}さらに、asキーワードを使ってエイリアス（別名）を定義し、より短い名前空間を使用することも可能です。
@use \"mixin\" as mxn;\n.container {\n @include mxn.second-color($color: 'yellow', $fWeight: 'bold')\n}@forwardルールは、スタイルシートが別のスタイルシートを公開することを許可し、プロジェクト全体で再利用可能なコードの集約を可能にします。例えば、複数のミックスインや関数を含む_mixin.sassファイルを、_global.scssを介して他のすべてのファイルに利用可能にすることができます。
_global.scss
\n@forward \"mixin\"@use \"global\" as *;\n\n.container {\n @include second-color($color: 'yellow', $fWeight: 'bold')\n}