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

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

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

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

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

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

@use "global/variable"; //コレが必要

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

まとめ

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

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