40
33

More than 3 years have passed since last update.

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

Last updated at Posted at 2014-04-16

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

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

variables.sass
$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

ということなのです。

40
33
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
33