Sassの!defaultは効率的なコンパイルを助く

ただここで出てくる「!default」の意味がよく分からなかったのと、付き合いが長くなりそうな仕組みだったので内容を突き詰めることにする。

!defaultの基本動作

端的に言うと、「!defaultは指定してある変数がすでに定義済みの場合、無視する＝定義されていない場合は定義する」という動きをする。

$bg: blue;
$bg: red;

body {
  background-color: $bg;
}

// コンパイル！

body {
  background-color: red;
}

このケースの場合、変数bgが2行目で上書きされるのでredが背景色としてコンパイルされる。

$bg: blue;
$bg: red !default; // !defaultが登場

body {
  background-color: $bg;
}

// コンパイル！

body {
  background-color: blue;
}

この場合、変数bgが1行目で定義されているため、!defaultが設定されている2行目の値で上書きされない。

// $bg: blue;
$bg: red !default; // !defaultが登場

body {
  background-color: $bg;
}

// コンパイル！

body {
  background-color: red;
}

このケースでは、変数bgが1行目でコメントアウトされたため定義されていないまま2行目に到達する。

すると!defaultが機能して、変数定義されてないやん！定義しよ！となる。コンパイルするとredが採用される。

前回やったbootstrapで活用されているのを詳しく書くと下記になる。

$body-bg:  gray; // 上書きしたい変数を記述

// Bootstrap and its default variables
@import "bootstrap";

@importが入っていることでちょっとややこしくなっているが、書き換えると….

$body-bg:  gray; // 変更した変数の値

// Bootstrap and its default variables
// ..BSによって大量の定義された変数を読み込んでいる

$body-bg: white !default;

というようなことが起こっている。自分でカスタムした変数に!defaultを指定する必要はない、とドキュメントに記載があったのはこの仕様のため。

ただ仮に!defaultが指定されていたとしても、1つ目の定義が採用されるので、BS側の変数は定義されないので結果は同じになる。

また、必ずbootstrapのコアSCSSはカスタムした部分より後に読み込むこととされているのもこの!defaultの仕様によるもの。

従来のCSS上書きスタイルでCSSを記述していた頭からすると、フレームワークの読み込みが後でないとダメというのは若干の違和感がある。しかし習うより慣れなので、さっそく採用することとする。