DartSassへの切り替え

DartSassへの切り替えで変更した部分は2つ

1. @importは使わず @useと@forward を採用
2. 通常の除算がコンパイルエラーになるためcalc()またはmath.divを必ず使う

※他にも変更点はありそうだが私が気をつけたのは2点です
※@importは 2022年10月1日には廃止 されるからまじで早く切り替えたほうがいい（ちなみに私は同僚に聞くまで知らなかった）

@useとは

読み込んだスタイルシートにのみに適用される。
たとえばcommon.scssにbutton.scssを読み込ませるときはこう。

@use "button";

コンパイルされたcommon.cssにはbutton.scssのスタイルが適用される。

変数とmixinの読み込ませ方

common.scssに変数ファイルcolor.scssとbutton.scssを読み込ませて、button.scssで変数を使おうとするとエラーになる。

//　これだとcolorの変数をbuttonで使えない
@use "color";
@use "button";

button.scssに@useを直接記載する必要がある

• **@useのファイル名（名前）を.で参照させる必要がある**

// これならcolor.scssの変数が使える
// そして変数に@useの名前を参照させる
@use "color";
.button{
	color: color.$red;
}

• **as {名前}で任意の名前で参照させたり、as *で省略させることも可能**

// 任意の名前で参照する
@use "color" as c;
.button{
	color: c.$red;
}

// 参照を省略する
@use "color" as *;
.button{
	color: $red;
}

変数を外部から変更する場合はwithを使う

• 変数宣言の際!defaultが使用されてる変数のみ変更可能

$red: #ff0000 !defalut;

@use "color" as * with(
	$red: #F30100;
);
.button{
	color: $red;
}

※変数ファイルが複数ある場合、毎回すべて読み込ませるのは面倒なのでこうゆうときに@forwardを使う

@forwardとは

複数ファイルをまとめて読み込んだファイルを読み込める

@useは、読み込ませたファイル内でしか変数を使うことができない。

例えば複数の変数ファイルがあって、それをいろんなファイルにすべて読み込ませるのはとても面倒。そんなときに1つのファイルにまとめてから読み込むことができるのが@forward

$red: #ff0000 ;

$small: 200px;

// @useだとできない
@forward "color" as * ;
@forward "size" as * ;

// color.scssとsize.scssを読み込んだvariable.scssを読み込む
@use "variable" as * ;
// colorとsize内の変数が使える
.button{
	color: $red;
	width: $small; 
}

withを使って読み込まれてる変数を変更できる

@use "variable" as * with (
	$small: 100px;
) ;
// colorとsize内の変数が使える
.button{
	color: $red;
	width: $small;  // 100px
}

同じファイル名はas {名前}で名前を変えなければいけない

// エラーになる
@use "layout/_header";
@use "project/_header";

//エラーにならない
@use "layout/_header" as "l-header";
@use "project/_header" as "p-header";

※@forwardで経由されていればエラーにならない

@forward "layout/_header";
@forward "project/_header";

calc()またはmath.divを使う

除算にだけmath.divを使用するのもあれなので
基本的にcalc()を使うことを推奨します。
calc()ではなくてもできる計算にもcalc()を統一性をもたせる、予期せぬエラーを防ぐためです。

math.div(100%, 3);  
calc( 100% / 3 )

参考記事