Sassに新しいモジュールシステムが導入され、@useと@forwardという2つのルールが登場し、@importルールは、2022年10月にサポートが終了する予定です。現在、Sassの主な実装としてDart SassとLibSassがありますが、まずDart Sassのみ実装されてます。LibSassにも実装される予定です。今回は @use、@forwardのルールを簡単に紹介します。
DEVELOPER
K.K.
Sassと言っても、実装している言語によって3つに分かれています。
今回のモジュールシステムの導入で初めてDart Sassの存在を知った方も多いのではないでしょうか。Dart Sassは高度に最適化されており、動作速度が速く、JavaScriptとの互換性もあります。
Dart SassはSass公式で推奨していることもあって、新機能は順次実装されます。
また、本編で紹介するSassのモジュールとは変数、関数、ミックスインを分類して再利用性を高めたsassのソースファイルのを指しています。
新モジュールシステムでは今まで分割したファイル、パーシャルを読み込むときに使っていた@importが廃止予定です。代わりに @use を使うことになりますが、書き方や扱い方が変わってきます。
一方、@useも@importと同様に別のファイルの情報を読み取ります。 スタイルの定義は従来通り、@useを使ったファイルに結合されることになりますが変数や関数、mixin はファイル単位で名前空間を持ちます。
たとえば、プロジェクト全体で利用する変数をまとめた_variables.scssというファイルがあったとします。@importを使用すると、変数はグローバルになり、どのファイルからもアクセスできます。
@import "variables";
@import "base";
$wh: "100%;
body {
width: $wh;
}
@useを使用する場合はこれらの変数はグローバルにはならず、読み込んだファイル内でしかアクセスできません。また、デフォルトでファイル名に応じた名前空間を持ち、以下のように〇〇.$variableという形式で参照することになります。
@use "base";
@use "variables";
body {
width: variables.$wh;
}
@importでは実際に使われているメンバーがどのsassファイルで宣言されているかを把握するのがとても大変でした。新しいモジュールシステムでは、ファイルごとに参照するモジュールを宣言するため、簡単に把握できると同時に役割ごとにファイルを分けることで、シンプルな変数名やmixin名を使うことができるようになります。
@useを宣言するときにas節を使うと独自の名前空間を持たせることもでき、変数の値を書き換えることが可能になります。
@use "variables" as v;
body {
width: v.$wh;
}
変数を上書きするとき、従来の@importルールでは変数をグローバルに定義する必要がありましたが@useはwith節を用いることで変数を上書きでき、グローバルな名前空間に影響しません。
$txt-size: 1rem;
$txt-line-height: 1.3;
@mixin text () {
font-size: $txt-size;
line-height: $txt-line-height;
}
@use "variables" with (
$base-font-size: 1.125rem,
$base-line-height: 1.8,
);
h1 {
@include variables.text();
}
メンバー(変数、関数、Mixins)の先頭に-(ハイフン)や_(アンダースコア)を使用するとプライベートメンバーとなり、宣言されたファイル内でしか利用できません。別ファイルで呼び出してもエラーになります。
$_shadow:10px 10px 10px rgba(0,0,0,0.4);
@use "variables";
button {
box-shadow: variables.$_shadow; // エラーになります。
}
@useはロードしたファイルにスコープが生成され、そのファイルでのみ使用することができますが@forwardを使用すると@forwardを宣言している対象ファイルに書かれてる内容を@useで参照することができます。大きなライブラリを作る際に便利かもしれません。
@forward "variables";
@forward "mixins";
@use "module";
{
font-size: module.$base-font-size;
}
@importが廃止されるとSassのエコシステムに大きく影響を及ぼすと思います。当面の間は混乱するかと思いますがgulpで新モジュールシステムを試してみても良いかもしれません。
参考URL
Sass公式
今日もあなたに気づきと発見がありますように
画面を回転してください