変数宣言の!defaultは「既に定義されている場合は上書きしない」という意味

Sassで変数を定義するときに !default がついていることがありますが、これは「あとから上書きされます」という意味ではなく「既に定義されている場合は上書きしません」という意味らしい。

例えばこんな感じの変数ばかりが定義されたファイルがあるとします。

$a: #777 !default
$b: $a !default

で、このファイルがgemでインストールしていて直接編集できないので、ローカルで上書きしたいとします。（例えばBootstrapのSassファイルを使いたいような場面を想像してみて欲しい）

その時に $a と $b を同時に変更するためにこういう風に書くのは 間違い です。

@import "variables"
$a: #555

なぜダメなのかというと、理屈が分かれば当たり前なんだけど、この上記のコードは内部的には下記の様に展開されるからです。 $b の値が決まる時点で $a は #777 なので、最終的に $a は #555 になるけど $b は #777 のままになってしまうわけです。

$a: #777 !default
$b: $a !default  // この時点で $a は #777
$a: #555

正しくはこの順番じゃないといけない。

$a: #555
@import "variables"

これは内部的にはこのように展開されます。

$a: #555
$a: #777 !default // !default は既に定義されている場合は上書きしないという意味
$b: $a !default   // なのでこの時点で $a は #555

ということなのです。