LoginSignup
6

More than 1 year has passed since last update.

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

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

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

@useとは

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

@use "button";

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

変数とmixinの読み込ませ方

common.scssに変数ファイルcolor.scssbutton.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 )

参考記事

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6