【Sass】別ファイルで定義した変数を使うには@useで呼び出す

Sassで変数を使おうと思ったらつまづきポイントがあったのでまとめてみました。

変数を使うには@useで変数を定義したファイル呼び出す必要がある

別ファイルで定義した変数を使うには、変数を使用するファイルで@useを使って変数を定義したファイル呼び出して使用する必要があります。

以下が想定しているディレクトリ構成と参考のコードです。

sass
┝ global
│ └ _variables.scss
└main.scss

$color-orange: #F1890E;

@use "global/_variable.scss" as *; //コレが必要

.text{
 color: $color-orange;
}

ちょっとした解説

@useの後ろにas *を付けると、変数をそのまま（名前空間なしで）使えるようになります。

仮にas *がない場合、以下のように記載します。

@use "global/_variable.scss" // "as *" がない場合

.btn{
 color: variables.$color-orange;
}

記載が単純になる反面、変数の出どころが分かりづらくなるデメリットもあります。

開発規模や使い勝手に応じて使い分けるのがおすすめです。

私は基本、as * ありで運用しています。

まとめ

Sassで変数が使えないな、と思ったら@useを使っているかを確認してみて下さい。

Sassを活用して効率的にCSSを書いていきましょう。

もしこの記事が役に立ったと感じていただけた方は、ぜひX（旧Twitter）やブログなどでシェアしていただけると嬉しいです。

最後までお読みいただき、ありがとうございました！