※この記事は2021年10月28日に書いた記事になります。
Live Sass Compilerについて
Live Sass CompilerはVS Codeの拡張機能であり、これをインストールすると自動でSassからcssへと変更する非常に便利なものです。しかし、少し対応していないことがあります。それがUseとforwardが使えない点です。
Sass公式はimportを推奨していない
公式には以下のことが書いてあります。
"The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)"
つまり、推奨してないんですね。この原因としては別々のファイルに同じ変数やmixin、変数などを用いた場合には対立が起こるかららしいです。
そして、それを解決するために作られたものがuseとforwardです。
Live Sass Compilerではimportしか使えない！？
私は初心者なのでそのことを知らずに使おうとしたのですが、全く反応しませんでした。これはuseとforwardをサポートしているコンパイラが今のところDart Sassしか無いみたいことが原因だそうです。つまりLive Sass CompilerはDart Sassをコンパイラとして使っていないので、importを使うしかないということです。
結論
Live Sass Compilerを使うときはimportを用いましょう。
どうしてもDart Sassを使いたい場合は同じVS Codeの拡張機能である「DartJS Sass Compiler」と「Sass Watcher」を使うと出来るようです。気になる方は「dart sass vscode」と検索して調べてみてください！