Sassメモ：!default を使った変数定義

$kabegami: "../img/kabegami.png" !default;

Sassで変数定義をする時 !default を設定しておくことで、Sass記述中に変数値の変更をできるようになります。

.kabegami1 {
  background-image:url($kabegami);
}
$kabegami: "../img/kabegami2.png";
.kabegami2 {
  background-image:url($kabegami);
}

上記例の場合 kabegami1と2で全く同じ記述ですが、途中で壁紙のパスを差し替えているので違う画像が入ります。

逆に言えば !default を設定しておかないと変数の書き換えが効きません。