SASSではこれまで他の.scssファイルをインポートするときに@importが使われてきましたが、@importは廃止となり、@useと@forwardの使用へと変わっています。
しかし@importをそのまま@useや@forwardに置き換えれば、これまでの処理がそのまま使えるわけではありません。
ここでは@useや@forwardとは何か？やそれぞれの使い方、変数を上書きする方法などを実例で解説しています。
@useと@forwardとは何か？
SASSでは外部のファイルを読み込むときに@importを使ってきました。しかし、@importでは、現在使用している変数がどこのファイルから読み込まれているのかわかりにくく、変数の値を上書きするときも@importの位置によって処理が変わるなど、使い勝手が良くない部分がありました。
そこで@importを改良して新たに取り入れられた機能が@useと@forwardです。
@useは指定したファイルを読み込みます。@importとの大きな違いは、以下の2点です。
- @useを記述してあるファイルを読み込んだときに、ファイルの内容が引き継がれない（継承が発生しない）
- @useでファイルを読み込んだら、変数やmixinを使う時に、どのファイルのものかを明示するため、名前空間を指定する必要があある。
これまで@importをすれば、そのファイルの中に記述されている@importの内容も全て引き継がれました。
ところが@useで呼び出せるファイルの内容は、そのファイルのみに留まります。この目的は継承の継承の継承、、といったように変数やmixinがごちゃまぜになるのを防ぐためです。
もちろん、他のファイルの内容を別のファイルにも渡したいというときがあります。そうしたときに使うのが@forwardです。
@forwardが記載してあるファイルを読み込むと、その中で@forwardで読み込んでいるファイルの内容を引き継ぐことができます。
@useと@forwardを使うにはdart-sassが必要
@useと@forwardの機能を使うには「dart-sass」というライブラリを使用する必要があります。
SASSの歴史は古く、もともとは「node-sass」というライブラリが使われていました。しかし、node-sassは既にサポートが終了しており、@useや@forwardなどの新しい機能に対応していません。
このため、@useと@forwardの機能を使うには、現在SASSの機能をサポートしているdart-sassを使う必要があります。
dart-sassとnode-sassの違いや、node-sassからdart-sassに切り替える方法については下記をご参考ください。
@useの機能
@useには以下の４つの使い方があります。
- ファイル名を名前空間にする。
- 好きな名前空間を設定する。（as）
- 名前空間を設定しない。（as *）
- 変数を上書きする。（!defaultとwith）
以下でそれぞれの方法について実例を解説していきます。
ファイル名を名前空間にする
1つ目は「読み込むファイルのファイル名を名前空間にする」方法です。
これは単純に@useでファイルパスを指定するだけです。
使い方
@use 'ディレクトリパス/ファイル名';こうすることでファイル名がそのまま名前空間となります。
- ファイル名冒頭の「_（アンダースコア）」と拡張子「.scss」は省略することができます。
- 末尾の「;」がないとエラーになります。
読み込んだファイルの変数などを使う方法
@useで読み込んだファイルの中に記述されている変数やmixinなどを使うには、名前空間を使って呼び出します。
名前空間.$変数名@include 名前空間.mixin名実例：変数を呼び出す場合
例えば「_variables.scss」というファイルに以下のように変数「$theme-color」と「$original-size」が記述してあるとします。
$theme-color: red;
$original-size: 16px;これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用する場合は以下のように記述します。
なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。
@use 'variables';
.headline {
color: variables.$theme-color;
font-size: variables.$original-size;
}↓ CSSにコンパイル
.headline {
color: red;
font-size: 16px;
}指定した変数の値が入っていることがわかります。
実例：mixinを呼び出す場合
例えば「_mixin.scss」というファイルに以下のようにmixin名「caution」が記述してあるとします。
@mixin caution {
color: red;
font-size: 32px;
}これを「test.scss」というファイルの中で@useを使って読み込む場合は以下のように記述します。
なお、「_mixin.scss」は「test.scss」と同じ階層にあるとします。
@use 'mixin';
.headline {
@include mixin.caution;
font-weight: bold;
}↓ CSSにコンパイル
.headline {
color: red;
font-size: 32px;
font-weight: bold;
}指定した変数の値が入っていることがわかります。
好きな名前空間を設定する
2つ目は「好きな名前空間を設定する」方法です。
@useでファイルパスを指定した後に「as」を使って好きな名前空間を記述します。
使い方
@use 'ディレクトリパス/ファイル名' as 好きな名前空間;こうすることで指定した名前が名前空間となります。
- ファイル名冒頭の「_（アンダースコア）」と拡張子「.scss」は省略することができます。
- 末尾の「;」がないとエラーになります。
- 名前空間にシングル（ダブル）クオテーションは不要です。
読み込んだファイルの変数などを使う方法
@useで読み込んだファイルの中に記述されている変数やmixinなどを使うには、自分が指定した名前空間を使って呼び出します。
名前空間.$変数名@include 名前空間.mixin名実例：変数を呼び出す場合
例えば、「_variables.scss」というファイルに以下のように変数「$theme-color」と「$original-size」が記述してあるとします。
$theme-color: red;
$original-size: 16px;これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用します。
その際に「as」を使って好きな名前空間をつけます。ここでは「var」とします。
なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。
@use 'variables' as var;
.headline {
color: var.$theme-color;
font-size: var.$original-size;
}↓ CSSにコンパイル
.headline {
color: red;
font-size: 16px;
}指定した変数の値が入っていることがわかります。
実例：mixinを呼び出す場合
例えば、「_mixin.scss」というファイルに以下のようにmixin名「caution」が記述してあるとします。
@mixin caution {
color: red;
font-size: 32px;
}これを「test.scss」というファイルの中で@useを使って読み込む場合は、mixin名の前に名前空間を指定する必要があります。
@useでファイルを読み込むときに「as」を使って、好きな名前空間を指定します。ここでは「mix」とします。
なお、「_mixin.scss」は「test.scss」と同じ階層にあるとします。
@use 'mixin' as mix;
.headline {
@include mix.caution;
font-weight: bold;
}↓ CSSにコンパイル
.headline {
color: red;
font-size: 32px;
font-weight: bold;
}指定した変数の値が入っていることがわかります。
名前空間を設定しない
３つ目は「名前空間を設定しない」方法です。
@useでファイルパスを指定した後に「as」を使って「*」を記述します。
使い方
@use 'ディレクトリパス/ファイル名' as *;こうすることで名前空間をつけずに、変数などを使用することができます。
- ファイル名冒頭の「_（アンダースコア）」と拡張子「.scss」は省略することができます。
- 末尾の「;」がないとエラーになります。
読み込んだファイルの変数などを使う方法
名前空間を省略できるので、変数名やmixin名をそのまま指定します。
$変数名@include mixin名実例：変数を呼び出す場合
例えば、「_variables.scss」というファイルに以下のように変数「$theme-color」と「$original-size」が記述してあるとします。
$theme-color: red;
$original-size: 16px;これを「test.scss」というファイルの中で@useを使って読み込み、各変数をプロパティの値として使用します。
ここでは「as *」を使って名前空間を無しにします。
なお、「_variables.scss」は「test.scss」と同じ階層にあるとします。
@use 'variables' as *;
.headline {
color: $theme-color;
font-size: $original-size;
}↓ CSSにコンパイル
.headline {
color: red;
font-size: 16px;
}指定した変数の値が入っていることがわかります。
実例：mixinを呼び出す場合
例えば、「_mixin.scss」というファイルに以下のようにmixin名「caution」が記述してあるとします。
@mixin caution {
color: red;
font-size: 32px;
}これを「test.scss」というファイルの中で@useを使って読み込む際に、「as *」を使って名前空間を無しにします。
なお、「_mixin.scss」は「test.scss」と同じ階層にあるとします。
@use 'mixin' as *;
.headline {
@include caution;
font-weight: bold;
}↓ CSSにコンパイル
.headline {
color: red;
font-size: 32px;
font-weight: bold;
}指定した変数の値が入っていることがわかります。
変数を上書きする
4つ目は「変数を上書きする」方法です。
@useでファイルパスを指定してファイルの内容を呼び出すときにwithを使って、変数名と値を指定します。
その際、読み込み元のファイルの変数には「!default」が設定してある必要があります。
呼び出し元のファイルの変数の記述（!defaultの使い方）
@useで呼び出すファイルの変数は以下のようになっている必要があります。
「!default」を使う時は、変数の値の末尾に記載します。
変数を値で定義している場合
$変数名: 値 !default;変数をオブジェクト形式（キー名: 値）で定義している場合
変数をオブジェクト形式（キー名: 値）で定義している場合は（ ）の後ろに「!default」を記述します。
$変数名: ( キー名1: 値1, キー名2: 値2,,,, ) !default;オブジェクト形式の変数など、変数の使い方の詳細については下記をご参考ください。
変数の上書き
@useでファイルを読み込んだときに変数を上書きするにはwithを使用します。
@use 'ディレクトリパス/ファイル名' with( $変数名1: 値1, $変数名2: 値2,,, );「as」を使って名前空間を変更することもできます。
@use 'ディレクトリパス/ファイル名' as 好きな名前空間 with( $変数名1: 値1, $変数名2: 値2,,, );こうすることで元のファイルの変数の値を上書きすることができます。
- ファイル名冒頭の「_（アンダースコア）」と拡張子「.scss」は省略することができます。
- 末尾の「;」がないとエラーになります。
読み込んだファイルの変数などを使う方法
変数名やmixin名の前に名前空間を記述する必要があります。
名前空間.$変数名@include 名前空間.mixin名注意点
呼び出し元のファイルの変数の上書きを許可するために「!default」の記述が必須となります。
上書きしようとしている変数に「!default」が記載されていない場合は、エラーが発生しコンパイルに失敗します。
▼「!default」を記述していない変数の値を上書きしようとしたときに発生するエラー
Compilation Error
Error: This variable was not declared with !default in the @used module.実例：!defaultによる値の上書き
例えば以下のように「_colors.scss」というファイルの中に、「$theme-color」という変数と、その変数を使ったpタグの記述があるとします。
このとき、「$theme-color」の値の末尾に「!default」を記述します。
$theme-color: #333 !default;
p{
color: $theme-color;
}このファイルを、「test.scss」というファイルの中に@useで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。
@use 'colors' with ( $theme-color: gold );
.headline{
color: colors.$theme-color;
}このファイルをCSSにコンパイルすると以下のようになります。
↓ CSSにコンパイル
p {
color: gold;
}
.headline {
color: gold;
}呼び出し元の「_colors.scss」の中に記述してある変数「$theme-color」の値が指定したとおりに上書きされていることがわかります。
実例：!defaultがない場合はエラーになる
上記の記述で、呼び出し元のファイル「_colors.scss」の変数に「!default」をつけない場合は以下のようになります。
$theme-color: #333;
p{
color: $theme-color;
}このファイルを、「test.scss」というファイルの中に@useで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。
@use 'colors' with ( $theme-color: gold );
.headline{
color: colors.$theme-color;
}このファイルをCSSにコンパイルすると以下のようなエラーが発生します。
↓ CSSにコンパイル
Compilation Error
Error: This variable was not declared with !default in the @used module.
╷
16 │ @use 'colors' with ( $theme-color: gold );
│ ^^^^^^^^^^^^^^^^^^^
╵エラーメッセージで「Error: This variable was not declared with !default in the @used module.」と表示されます。
「エラー：この変数は、@usedモジュールで!defaultで宣言されていません。」というように、変数の値を書き変えたいなら「!default」を使ってねというメッセージが書かれています。
@forwardの機能
@forwardには以下の２つの使い方があります。
- ファイルの継承を可能にする。
- 変数を上書きする。（!defaultとwith）
以下でそれぞれの方法について実例を解説していきます。
ファイルの継承を可能にする
@forwardのメリット
@forwardは@useで許可されていないファイルの継承を可能にします。
このため、以下のような手順で、ファイルCでファイルBを読み込むと、ファイルCの中でファイルAの内容を呼び出すことができます。
ファイルA → ファイルB（@forwardでAを読み込み）→ ファイルC（@useでBを読み込み）@useでは継承できない
以下のように@forwardではなく@useを使った場合は、ファイルCにはファイルAの内容は読み込まれません。
ファイルA → ファイルB（@useでAを読み込み）→ ファイルC（@useでBを読み込み）@forwardの使いどころ
@forwardを使う時は、変数を記載したファイル（例えば、_variable.scss）やmixinを記載したファイル（_mixin.scss）などを、いろんなファイルでよく読み込むファイルをまとめて読み込みたいときに使用します。
インポート用の1つのファイルを用意して、その中で@forwardを使ってよく使うファイルを読み込んでおけば、１つのファイルを@useで読み込んだだけで、そこに記載してある他のファイルの内容をまとめて読み込むことができます。
使い方
@forward 'ディレクトリパス/ファイル名';このファイルを読み込めば指定したファイルがの内容を引き継ぐことができます。
- 末尾の「;」がないとエラーになります。
- 存在しないファイルを指定するとインポートエラーが発生します。
Error: Can't find stylesheet to import.- ファイル名冒頭の「_（アンダースコア）」と拡張子「.scss」は省略することができます。
@forwardを記載したファイルを読み込む
@forwardを記載したファイルを読み込むときは@useを使います。その際、名前空間は＠useで指定した名前になります。
名前空間.$変数名@include 名前空間.mixin名@useで@forwardが記載してあるファイルを読み込んだ場合、名前空間に指定するのは大本のファイルの名前空間ではなく、@useで読み込んだときの名前空間になります。
@forwardの実例
例えば、以下のように「_colors.scss」「_mixin.scss」「_sizes.scss」の３つのファイルがあるとします。
$theme-color: #333 !default;
$sub-color: #777 !default;@mixin caution {
color: red;
font-size: 32px;
}$original-size: 16px;
$large: 30px;
$small: 12px;この３つのファイルをとりまとめて一気にインポートできるようにするために、「_forward.scss」というファイルを作って、@forwardでファイルを読み込みます。
@forward 'mixin';
@forward 'colors';
@forward 'sizes';このファイルを「test.scss」というファイルの中@useを使って呼び出します。その際「as」を使って名前空間を「fw」にします。
そして、「_forward.scss」の中で読み込んでいるファイルの変数を使った処理を記述します。
@use 'forward' as fw;
p {
color: fw.$theme-color;
font-size: fw.$small;
}
.error {
@include fw.caution;
font-weight: bold;
}@use 'forward';の記述だけで「_forward.scss」に記述されている全てのファイルが読み込めるのが@forwardのポイントです。
このファイルをCSSにコンパイルすると以下のようになります。
p {
color: #333;
font-size: 12px;
}
.error {
color: red;
font-size: 32px;
font-weight: bold;
}指定した変数やmixinが適切に読み込まれていることがわかります。
補足
なお、ここではそれぞれのファイルは以下のように同じ階層にある場合です。
ファイルの階層に合わせて、@useや@forwardで記載するファイルパスを変更してください。
@forwardで変数を上書きする
@useと同じく「!default」と「with」を使って@forwardでファイルを呼び出したときに、呼び出し元のファイルの変数の値を上書きすることができます。
変数の上書き
@forwardでファイルを読み込んだときに変数を上書きするにはwithを使用します。
@forward 'ディレクトリパス/ファイル名' with( $変数名1: 値1, $変数名2: 値2,,, );こうすることで元のファイルの変数の値を上書きすることができます。
- ファイル名冒頭の「_（アンダースコア）」と拡張子「.scss」は省略することができます。
- 末尾の「;」がないとエラーになります。
注意点
呼び出し元のファイルの変数の上書きを許可するために「!default」の記述が必須となります。
上書きしようとしている変数に「!default」が記載されていない場合は、エラーが発生しコンパイルに失敗します。
▼「!default」を記述していない変数の値を上書きしようとしたときに発生するエラー
Compilation Error
Error: This variable was not declared with !default in the @used module.@fowardを使ったファイルの!defaultの実例
!defaultとwithによる値の上書き
例えば以下のように「_colors.scss」というファイルの中に、「$theme-color」という変数と、その変数を使ったpタグの記述があるとします。
このとき、「$theme-color」の値の末尾に「!default」を記述します。
$theme-color: #333 !default;
p{
color: $theme-color;
}このファイルを、「_forward.scss」というファイルの中に@forwardで読み込みます。
その際、withを使って変数「$theme-color」を上書きする処理を記述します。ここでは上書きを許可するため値に「!default」も記載しておきます。
@forward 'colors' with ( $theme-color: blue !default);このファイルを、「test.scss」というファイルの中に@useで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。
@use 'forward' as colors with ( $theme-color: gold );
.headline{
color: colors.$theme-color;
}＠useで「as」を使うと、名前空間に好きな名前を付けることができます。
このファイルをCSSにコンパイルすると以下のようになります。
↓ CSSにコンパイル
p {
color: gold;
}
.headline {
color: gold;
}変数「$theme-color」の値が指定したとおりに上書きされていることがわかります。
大本の!defaultがない場合はエラーになる（@forward時のエラー）
上記の記述で、「_colors.scss」の変数「$theme-color」の値に「!default」が無いは、@forwardで呼び出したときに変数の値に「!default」がないと、@forwardした時点でエラーが発生します。
$theme-color: #333;
p{
color: $theme-color;
}このファイルを、「_forward.scss」というファイルの中に@forwardで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。
@forward 'colors' with ( $theme-color: blue);するとこの時点で以下のようなエラーが発生します。
↓ CSSにコンパイル
Compilation Error
Error: This variable was not declared with !default in the @used module.
╷
1 │ @forward 'colors' with ( $theme-color: blue);
│ ^^^^^^^^^^^^^^^^^^
╵エラーメッセージで「Error: This variable was not declared with !default in the @used module.」と表示されます。
「エラー：この変数は、@usedモジュールで!defaultで宣言されていません。」というように、変数の値を書き変えたいなら「!default」を使ってねというメッセージが書かれています。
大本の!defaultがない場合はエラーになる（@forwardに!defaultがある場合）
上記の記述で、「_colors.scss」の変数「$theme-color」の値に「!default」が無い場合でも@forwardで呼び出したときに変数の値に「!default」をつければ、@forward時点ではエラーは発生しません。
ですが、実際に変数を呼び出して、「_forward.scss」→「_colors.scss」と辿った時点でエラーが発生します。
$theme-color: #333;
p{
color: $theme-color;
}このファイルを、「_forward.scss」というファイルの中に@forwardで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。
このとき値の後ろに「!default」を記述しておけば、この時点ではエラーは発生しません。
@forward 'colors' with ( $theme-color: blue !default);このファイルを、「test.scss」というファイルの中に@useで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。
@use 'forward' as colors with ( $theme-color: gold );
.headline{
color: colors.$theme-color;
}すると、「_forward.scss」→「_colors.scss」と辿り、CSSのコンパイルエラーが発生します。
↓ CSSにコンパイル
Compilation Error
Error: This variable was not declared with !default in the @used module.
╷
4 │ @use 'forward' as colors with ( $theme-color: gold );
│ ^^^^^^^^^^^^^^^^^^^
╵@forward時に!defaultがない場合は、@useで上書きできない
大本となる「_colors.scss」の変数「$theme-color」の値に「!default」が設定してあっても、@forwardで変数を上書きするときに、!defaultをつけず、かつ、@forwardを実行している「_forward.scss」を@useで呼び出したときに、変数の上書きをしようとした場合はエラーが発生します。
以下のように「_colors.scss」で変数「$theme-color」を定義するときに値に上書きを許可する「!default」をつけておきます。
$theme-color: #333 !default;
p{
color: $theme-color;
}このファイルを、「_forward.scss」というファイルの中に@forwardで読み込みます。
その際、変数「$theme-color」を上書きする処理を記述します。値の後ろに「!default」を記述しません。
@forward 'colors' with ( $theme-color: blue);この時点ではエラーは発生しません。
このファイルを、「test.scss」というファイルの中に@useで読み込みます。
@useで呼び出すときも、「$theme-color」を上書きしようとしなければエラーは発生しません。
ここではあえて、変数「$theme-color」を上書きする処理を記述します。
@use 'forward' as colors with ( $theme-color: gold );
.headline{
color: colors.$theme-color;
}すると、@forwardしたときに変数の値の上書きを許可していないので、コンパイルエラーが発生します。
↓ CSSにコンパイル
Compilation Error
Error: This variable was not declared with !default in the @used module.
╷
4 │ @use 'forward' as colors with ( $theme-color: gold );
│ ^^^^^^^^^^^^^^^^^^^
╵
