🔧 Sassでのファイル管理と名前空間の活用方法

SassはCSSのメンテナンス性と再利用性を向上させるための強力なツールです。しかし、その全ての機能を最大限に活用するためには、ファイルの管理方法や、モジュールシステムの理解が不可欠です。この記事では、Sassのファイル名の先頭にアンダーバーを付ける慣習、@useと@forwardディレクティブの使い方、そして名前空間の管理について解説します。

_ アンダーバーのファイル名について

Sassでは、ファイル名の先頭にアンダースコア(_)を付けることで、そのファイルが部分的なファイル（パーシャル）であることを示します。パーシャルは、他のSassファイルによってインポートされることを意図していますが、単独でコンパイルされることはありません。これにより、複数のスタイルシートをモジュール化し、プロジェクトをより管理しやすくすることができます。

ファイル読み込みと名前空間

Sassの@useルールを使うと、他のファイルの変数やミックスイン、関数などを読み込んで使用することができます。 ※ @importは古い書い方なので使わないこと。

_mixin.sass

@mixin second-color($color, $fWeight) {
    color: $color;
    font-weight: $fWeight;
    cursor: pointer;
}

@use "mixin";

.container {
  @include mixin.second-color($color: 'yellow', $fWeight: 'bold')
}

さらに、asキーワードを使ってエイリアス（別名）を定義し、より短い名前空間を使用することも可能です。

@use "mixin" as mxn;
.container {
  @include mxn.second-color($color: 'yellow', $fWeight: 'bold')
}

@forward について

@forwardルールは、スタイルシートが別のスタイルシートを公開することを許可し、プロジェクト全体で再利用可能なコードの集約を可能にします。例えば、複数のミックスインや関数を含む_mixin.sassファイルを、_global.scssを介して他のすべてのファイルに利用可能にすることができます。

_global.scss

@forward "mixin"

@use "global" as *;

.container {
  @include second-color($color: 'yellow', $fWeight: 'bold')
}