Sass（sass,scss）の!defaultに関するメモ

!defaultは「既に値が定義されている場合は上書きしない」という意味らしい。

「ベースとなる共通のスタイルを定義して、そのスタイルを再利用するようなケースで利用すると、安易に上書きすることができスタイルの再利用の効率が高まる」の意味が飲み込めなったため整理する。

参考サイト

基本的な使い方・うまく利用できなかった場合

以下、hoge.scssの中身

$a: #000 !default;
$b: $a !default;

展開する

@import "hoge.scss";
$a: #111;

CSSに変換されるとこうなる

$a: #000 !default;
$b: $a !default;
$a: #111;
 /* 最終的に　$a = #111、$b = #000 となる */

上から順番に読み込まれて展開されるため、$aと$b両方とも#111に設定することはできない。

うまく利用できた場合

hoge.scssを読み込む順番を変える

$a: #111;
@import "hoge.scss";

CSSに変換されるとこうなる

$a: #111;
$a: #000 !default;　/* すでに$aが定義されているため反映されない */
$b: $a !default;
/* $a = #111、$b = #111 となる */

実際の使用例

参考サイト

!default フラグは、実際には Sass のパーシャルファイルを使う場合などで利用します。@extend などで予め値を指定しつつ変更可能にしておく場合のように、上書きされる前提で !default フラグは使います。

_extend.scss（@extend用）

%colorSetting {
    $color: pink !default;
    color: $color;
}
%borderSetting {
    $borderRadius: 6px !default;
    border-radius: $borderRadius;
}

_setting.scss（設定）

$color: blue;

base.scss（@importとメインのスタイル）

@import "setting";
@import "extend";

.hoge {
    @extend %colorSetting;
    @extend %borderSetting;
}
/* color:blue, border-radius:6pxとなる */