かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

SCSS の !default フラグ についてのメモ

Sass (SCSS) CSS

変数に !default フラグを付けて定義すると、変数が定義されてないか値が null の場合のみ値が設定されるようになる

g.e.
!default フラグなし

$base-color: #333;
$base-color: #000; // 後から出てきたもので上書きされる
body {
  color: $base-color; // => #000
}

!default フラグあり

$base-color: #333;
$base-color: #000 !default; // 既に定義されているので無視される
body {
  color: $base-color; // => #333
}

!default フラグしかない場合は最初に登場した値がセットされる

$base-color: #333 !default; // 定義されてない変数なので定義される
$base-color: #000 !default; // 既に定義されているので無視される
body {
  color: $base-color; // => #333
}

最後までファイルを捜査してからコンパイルされる訳ではない

変数の指定やスタイルの定義の順番には気をつける必要がある

// ライブラリとか
$font-style: italic !default;
.p1 {
  font-style: $font-style;
}

// 独自のスタイル
$font-style: normal; // 指定を上書き
.p2 {
  font-style: $font-style;
}

👇 コンパイル

.p1 { font-style: italic; }
.p2 { font-style: normal; }

.p1 のスタイルを定義している段階では変数は上書きされていない
.p1 も .p2 も同じにしたい場合は独自のスタイルの変数が先に書かれてないとダメだった

// 独自の変数
$font-style: normal;

// ライブラリとか
$font-style: italic !default; // 既に定義されているので無視される
.p1 {
  font-style: $font-style;
}

// 独自のスタイル
.p2 {
  font-style: $font-style;
}

👇 コンパイル

.p1 { font-style: normal; }
.p2 { font-style: normal; }

sample

See the Pen SCSS !default keyword by KIKIKI (@chaika-design) on CodePen.

所感

ライブラリの中で指定されているスタイルを変更できる素晴らしい仕組みという事は理解できるが、ライブラリ内で!defaultで定義され指定されているスタイルを独自のスタイルに変更するには、独自のスタイルの変数だけを先に記述してからライブラリを読み込ませる構成にせざるを得ないので、先頭でまとめてライブラリを import にできないのに若干の気持ち悪さを感じる…

例 ライブラリ内のスタイルを変更できる構成
ライブラリ base.scss

$base-color: #000 !default;

body {
  color: $base-color;
}
p {
  margin: 0 0 14px;
}

main.scss

// 独自の変数定義
$base-color: #333;

// ライブラリの読込み
@import base;

// その他のスタイルやライブラリのスタイルを変更する独自のCSS
p {
  margin: 1em 0;
}

SCSS 難解…

[参考]

国家は破綻する――金融危機の800年

国家は破綻する――金融危機の800年

デフォルト…