Sassの@importが廃止されるので@useに入れ替えたメモ

Sassの@importが2022年の10月頃に廃止されるそうで、今まで使用していた@importの記述を推奨ルールの@useに書き換えたのでメモ書きを残します。

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.)

#@importとは
@importはcssの@importと同じように、外部のファイルを読み込むために使用します。
###例（style.scssで使用）

_header.scss

/* 小分けにしたscssファイルに中身を記述 */
header {
  background-color: #fafafa;
}

_button.scss

/* 小分けにしたscssファイルに中身を記述 */
.p-button {
  padding: .5em 1em;
  border-radius: 5px;
}

style.scss

/* 纏めたいscssファイルで読み込みの@importを記述 */
@import '_header';
@import '_button';

style.css

/* 出力結果 */
header {
  background-color: #fafafa;
}
.p-button {
  padding: .5em 1em;
  border-radius: 5px;
}

#@useの使用に移行
@useも@importと同じく外部のファイルを読み込むために使用するので、記述をこっちに変更しましょう。

##ただ書き換えただけだと動かない
@useも@importと同じならただ差し替えれば動くんでは〜とか甘い考えでいたら動きませんでした。
両者は結果的に見れば同じルールですが、機能的には使い方が違うので当然でしたね

###@use

(Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

先の引用内にもありましたが、そもそも@useは『Dart Sass』のみで動くそうです。
今までコンパイルで使用していたのが『node-sass』だったので、コンパイルの方式を変える必要がありました。

##VSCodeのプラグインを変更
VSCodeを使用している前提の話になってしまいますが、使用するプラグインを変更することで問題を解決しました。
『DartJS Sass Compiler and Sass Watcher』はその名の通りDartJSでSassのコンパイルをしてくれるプラグインです。

設定などは下記ブログを参考にさせていただきました。

こちらを使用すれば万事解決
かと思いきや

##エラーが出る！

┌ @include mq() { 46 │ │ font-size: 30px; 47 │ │ &::before { 48 │ │ content: none; 49 │ │ } 50 │ └ } ╵ 
Users/●●/Documents/hoge/css/_main.scss 45:5 @use 
Users/●●/Documents/hoge/css/style.scss 8:1 root stylesheet

Users/●●/Documents/hoge/css/_main.scss（小分けにしたscssファイル）の中にある@include mq(){色々}が読めないから
Users/●●/Documents/hoge/css/style.scss（纏めファイル）がコンパイルできないよ〜というエラーが出ました。

###Dart Sassは名前空間の指定が必要
@useは@importほど何でもかんでも読み込んでくれる訳ではないらしいです。
それぞれの変数やmixinなどをカプセル化して読み込んで使用するそうで、別ファイルで定義した変数やmixin等は使用したいファイルで読み込む記述を書かなければ使用できませんでした。

上記のエラーの例だと別ファイルで定義した@mixin mq(メディアクエリの略)が読み込めないのでエラーが出ていました。

なので、使用する際は下記のようにファイル上部に読み込みの記述を追記します。

_responsive.scss

// レスポンシブの定義scssファイル
// これを各ファイルで読み込んで使用する
$breakpoint-sm: 425px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;

$breakpoints: (
    'sm': 'screen and (max-width: 425px)',
    'md': 'screen and (max-width: 768px)',
    'lg': 'screen and (max-width: 1024px)',
    'xl': 'screen and (max-width: 1440px)',
) !default;

@mixin mq($breakpoint: md) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

_main.scss

// 最初に使用する名前空間を指定
// _responsive.scssのmqを使用する
@use "../css/responsive" as mq;

// 以下main.scssの本文
body {
  color: #582D00;
  line-height: 2;
  ...
}

// 使用する際にも名前空間を指定する
p {
  @include mq.mq() {
    text-align: left;
  }
}

これでエラーもなくコンパイルできるようになりました

ちょっと省略

_main.scss

// 最初に使用する名前空間を指定
// _responsive.scssの全てを使用する
@use "../css/responsive" as *;

// 以下main.scssの本文
body {
  color: #582D00;
  line-height: 2;
  ...
}

// 使用する際の名前空間が必要なくなる
p {
  @include mq() {
    text-align: left;
  }
}

読み込みの際に*を使うと使用する際に名前空間の指定が必要なくなるのでちょっとnode-sassっぽい書き方ができます。

##他にも色々できるらしい
調べただけで使う機会がないので紹介はしていませんが、@forwerdを@useと組み合わせて使用すると孫ファイルまで要素を使えるとかなんとか
使う機会があったら追記します〜