Sassの!defaultっていつ使うの？

こんにちは！ラブグラフ開発インターンのけいすけです。
Sassの!defaultの使い所が分からなかったので調べてみました。

!defaultとは

変数のデフォルト値を設定するための命令です。次のように変数の定義の後ろに!defaultと書くことで、変数のデフォルト値を設定できます。

$black: #000 !default;

挙動を細かくみていきましょう。公式のページSass: Variablesには次のように書いてあります。

Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.

つまり、

• 変数が未定義の場合
• 変数の値がnullの場合

には変数に値を代入し、それ以外の場合は既存の値を使う、ということのようです。
実際に確認してみましょう。

変数が未定義の場合

$black: #000 !default;
@debug $black; //=> #000

@debugは変数の値を出力する命令です。

変数がnullの場合

$black: null;
$black: #000 !default;
@debug $black; //=> #000

変数が定義済みの場合

$black: #111;
$black: #000 !default;
@debug $black; //=> #111

確かに公式の言うとおりになっています。

ついでに!defaultの後で変数を定義した場合もみてみましょう。

!defaultの後で変数を定義した場合

$black: #000 !default;
$black: #111;
@debug $black; //=> #111

この場合は変数が上書きされています。

いつ使うのか

機能は分かっても使い所がよく分からないですよね。
公式のページにヒントがありました。

Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS.
To make this possible, Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null. Otherwise, the existing value will be used.

「もしあなたがSassのライブラリを書くことになったら、ライブラリの変数の値をユーザーが設定できるようにしたくなると思う。そんなときのために!defaultという命令を用意した。」

つまり、ライブラリのソースコードを変えることなくライブラリ内の変数の値を変えるための命令だということらしいです。@use <url> with (<variable>: <value>, <variable>: <value>)と書くことで、ライブラリ内の変数の値を変えることができます。
これだけだと分かりづらいと思うので、例を見てみましょう。

例

3つの変数が定義された、_library.scssという名前の単純なライブラリがあるとします。

_library.scss

$black: #000 !default;
$color: $black !default;
$background-color: $black !default;

このライブラリをstyle1.scssとstyle2.scssという2つのファイルで使い回したいが、style1.scssでは$blackの値は#000のまま、style2.scssでは少し明るい#222にしたいという状況だとします。
この場合、それぞれのファイルで次のようにライブラリを呼び出すことで、ライブラリのソースコードは変えずに$blackの値を変えられます。

style1.scss

@use 'library';

code {
  color: library.$color;
  background-color: library.$background-color;
}

style2.scss

@use 'library' with (
  $black: #222,
);

code {
  color: library.$color;
  background-color: library.$background-color;
}

それぞれコンパイルします。

sass style1.scss style1.css
sass style2.scss style2.css

すると、style1.cssでは$blackの値として#000が使われ、style2.cssでは#222が使われました。

style1.css

code {
  color: #000;
  background-color: #000;
}

style2.css

code {
  color: #222;
  background-color: #222;
}

結論

Sassの!defaultの使い所は、Sassライブラリを書く場合だということが分かりました。ライブラリの変数にデフォルト値を設定しつつ、ライブラリのユーザーが自分のスタイルに合わせて変数の値を簡単にカスタマイズできるようにするための機能ということでした。!defaultのおかげで既存のコードの変更なしに変数をカスタマイズできるようになりライブラリの再利用性が向上します。

読んでいただきありがとうございました！!default使っていきましょう！

参考

https://sass-lang.com/documentation/variables/