sassの@importが廃止になる、Dart Sassに置き換える時メモ

Sassについて

今まで特に意識することなくなんとなく使っていましたが、
@importが廃止になると知り軽く調べてみました。
SassにはDartSass、LibSass、RubySassの3種類が存在するらしい。
ですが、LibSassとRubySassに関しましては既に非推奨になっていて、
Sass公式では、DartSassを推奨しているようです。

@importが廃止になり、@use、@forwardが追加された

@importには色々な障害があったらしく、それらを解決するために
@useと@forwardが追加されたようです。

@importから、@use、@forwardに書き換える

単純にscssを読み込んでいる場合は、下記のように置き換えれば大丈夫です。

_base.scss

html {
  font-size: 10px;
}

// sample.scss
- @import "./base";
+ @use "./base";

たとえば_color.scssを読み込み変数を使用する場合は、
下記のように書き換えれば使用できます。

_color.scss

$color-black: #000;

// sample.scss
- @import "./color";
+ @use "./color";

- color: $color-black;
+ color: color.$color-black;

また、@useで読み込んだファイルにasをつけることで名前空間を指定することができます。

_color.scss

$color-black: #000;

sample.scss

@use "./color" as c;

color: c.$color-black;

mixinを読み込んで使用する場合が下記のようになります。
変数を読み込む時と似たような感じです。

_fontSize.scss

$baseSize: 10px;

@mixin baseSize() {
  font-size: $baseSize;
}

sample.scss

@use "./fontSize";

@include mixin.baseSize();

他のscssファイルを経由して使用する時は下記のようになります。

_color.scss

$color-black: #000;

_fontSize.scss

$baseSize: 10px;

@mixin baseSize() {
  font-size: $baseSize;
}

// _base.scss
- @import "./color";
+ @forward "./color";

- @import "./fontSize";
+ @forward "./fontSize";

// sample.scss
- @import "./base";
+ @use "./base";

html {
 color: base.$color-black;
 @include base.fontSize();
}

除算演算子（/）を使う時は、sass:mathを使用する

+ @use "sass:math";

.div {
-  width: (100% / 3);
+  width: math.div(100%, 3);
}

calc()関数を使い内部に(/)を使う場合は、今まで通り
calc(100% / 3)
のように書いて大丈夫なようです。

自分が差し当たって使用したのは上記くらいでした。
もっと変わった部分があるみたいですが、おいおい追記していきたいと思います。