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

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

この記事の著者

web制作エンジニア

伊藤 義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

変数を扱えるのはSassのメリットの一つなので、しっかり覚えて活用していきましょう。

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

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

以下が参考のコードです。

想定しているファイル構成は以下。

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

//変数
$color-orange: #F5A623;

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

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

まとめ

Sassで変数が使えないな、と思ったら@useを使っているかを確認してみて下さい。
Sassを活用して効率的にCSSを書いていきましょう！