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

BootstrapをSassを使ってカスタマイズする際に、カスタム用のSCSSを作成して変数を上書きすることを学んだ

ただここで出てくる「!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での活用

前回やった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を記述していた頭からすると、フレームワークの読み込みが後でないとダメというのは若干の違和感がある。しかし習うより慣れなので、さっそく採用することとする。

参考書籍

このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る