@importに置き換わる新しいコード細分化の方法です。取り込み方法はどちらも同じです。
// `_foo.scss`を読み込む
@use "foo";
違いはここからです。@importの時はその中身をその行にコピペしたかのような解釈でしたが、@useの場合はfoo内の要素にはfoo.プレフィックスを付けて使います。
例えばfooの中には変数$colorが定義されてるとします。その時使う側では、
@use "foo";
.selector {
color: foo.$color;
}
のような形になります。これは@mixinや@functionなどのルールに対しても同様です。
@use "foo";
.selector {
@include foo.awesome-mixin;
width: foo.awesome-width-function();
}
ただし、セレクタ系の要素は@importの時と同じ扱いです。例えば以下のような Sass があるとして、
// _foo.scss
%container {
max-width: 960px;
margin: 0 auto;
}
.selector {
color: orange;
}
// main.scss
@use "foo";
body {
@extend %container;
margin: 0;
}
これを変換すると大体以下のようになります。
.selector {
color: orange;
}
body {
max-width: 960px;
margin: 0 auto;
}
body {
margin: 0;
}
@importと同じですね。
別名
さて、先程からfooという名前で読み込んだ時、foo.というプレフィックスを付けて使っていますが、設計を失敗するなどして同じ名前のファイルが複数できてしまったりした時にこれだと困ることになります。
そんな時の為に@useは別名での取り込みをサポートしています。それには後ろにasを付けて別名を続けます。以下はfooにxxx-fooという別名を付けてみてます。
@use "foo" as xxx-foo;
.selector {
color: f.$color;
}
カスタマイズして取り込み
内部で定義した!defaultを付けた変数は取り込み時に上書きできるという機能があります。_foo.scssが以下のような場合があるとします。
$color: orange !default;
これが外部のライブラリで「俺たちは青を使いたいんだ！」という場合は、以下のようにwithを続けて置いて取り込むことで内部で$colorを使ってる箇所すべてを変更できます。
@use "foo" with ($color: blue);
.selector {
color: f.$color;
}
ちなみにもし!default定義されて無い変数をwithで渡したりするとSassError: This variable was not declared with !default in the @used module.のようなエラーになります。
あわせ技
asとwithどちらも使いたい時は、必ずasを先にする必要があります。
@use "foo" as xxx-foo with (
$color: blue
);
