Dart Sass @import
しばらくメンテナンスされていないCSS Frameworkを使用する為に、勉強がてら@useや@forwardに書き換えようと思って、調べてみました。
２０２２年１０月１日で、Dart Sassの@importが廃止される予定でした。
２０２２年１０月１日を過ぎた現在でも、延期になったみたいで、@importは廃止されていません。
検索すると、廃止されると書いてある過去記事が、うんざりするほど、一杯表示されます。
未だに廃止されていないので、記事を書き換えるか削除してほしいです。
@useと@forwardの説明が、ややこしくて、さっぱりわかりません。
@use
今までだと、@import "variables"の一文だけで済んでいたと思います。
PHPの名前空間のように、_variables.scssの中に定義した変数を使う時、@useで宣言します。
１００ファイルあったとしても、変数を使うのなら、全てに@useが、必要になるはずです。
しかし、@useを記述したファイルを、別のファイルから@useするので、？？と思います。
@forward
@forwardは、転送だと説明している人もいるけど、いまいち、わかりませんでした。
@forwardを使わなくても、@useで直接、ファイルを指定する方法もあります。
mixinsフォルダの中に、複数のファイルがあって、名前空間をmixinsで、まとめたいという場合は、@forwardを使うことになるのかな？
フォルダの中に<フォルダ名>/_index.scssを作った場合は、便利そうだと思いました。
_index.scssの例
例えば、mixinsというフォルダがあって、_color.scssと_shadow.scssがあったとします。
拡張子は省略できますが、わかりやすいかな？と思って、記述しています。
@use "mixins/color.scss" as *; @use "mixins/shadow.scss" as *;
mixins/_index.scssがあれば、下記の通りで済みます。
@use "mixins" as *;
mixins/_index.scssの中身
@forward "./color.scss"; @forward "./shadow.scss";
