「変数の値を書き換えませんよ」と宣言する !default

Sass では、その変数に値がセットされているとき、その変数を上書きしませんと宣言することができます。

$変数名: 値 !default;

!default

作成した Sass を他の人が使用したり、機能別に分割して作業したりする場合に使える「 !default 」という機能が用意されています。

例えば、次のような _font.scss ファイルが作成されていたとします。（ライブラリーみたいなイメージで考えます。）

$_font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

body {
  line-height: 1.5;
  font-family: $_font-family;
}

新しくサイトを構築する時、できるだけ使える部品を使ってトラブルや工数を下げたいですよね。しかし、新しいサイトイメージに合ったスタイルを使いたいということもあります。そんな時にスタイルを上書きするため次のような SCSS ファイルを用意することが考えられます。

@import "font";

body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

コンパイルすると次のような CSS が出力されます。機能としては問題ありませんが、美しくない気がします。

body {
  line-height: 1.5;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

この出力をすっきりさせるために部品となる _font.scss ファイルの変数に「 !default 」を追加します。

$_font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;

body {
  line-height: 1.5;
  font-family: $_font-family;
}

インポートする側のファイルは、同じ変数に使用したい値をセットしておきます。値をセットした後にインポートすることによって「 !default の上書きしません宣言」の効果を発揮します。

1. $_font-family 変数に値をセット。
2. _font.scss が展開される。
3. _font.scss 内の $_font-family には !default が指定されており、すでに $_font-family 変数には値がセットされているため上書きしない。

$_font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

@import "font";

コンパイルを実行すると、次のような CSS が出力されます。

body {
  line-height: 1.5;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

うまく設計できれば、部品の再利用がしやすくなり、すっきりした CSS を出力することができるようになります。