!defaultってなんぞ - ITコンサルの日常

Sencha TouchをCompassを使って、色々カスタマイズしてみようと思い、
$base-colorってのを探してみると、
resources/themes/stylesheets/sencha-touch/default/_variables.scss
で見つかる。

が、中を見てみると、

...
// These are the only variables which drive the theme color scheme
/*$base-color: #647482 !default; // Graphite*/
$base-color: #354F6E !default; // Graphite
...

のようになってる。
なんだこの!defaultって。ってのが今回の話題。
(ちなみに余談だが、コメントアウトされてる$base-color: #647482を有効にしてみると、グレーっぽい感じになる)

Sassのドキュメントを見てみると、該当の箇所が見つかる。
Variable Defaults: !default

Variable Defaults: !default

変数に対して、!defaultフラグが値の後ろに付与されている場合、その変数に値が割り当てられていなければ、値を割り当てることができます。これは、変数に値が既に割り当てられていれば、上書きすることはできませんが、まだ値が割り当てられていなければ、値を設定することができるという意味です。

(謎かけみたいな訳文だな。。)

例：

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

以下のようにコンパイルされます。

#main {
  content: "First content";
  new-content: "First time reference"; }

constみたいな意味かと思ったら、
var = var || newVal
みたいな意味だった。
だから、下の例みたいに、先に変数を定義するわけね。
(_variables.scssの$base-colorは!default付きだから、先に定義した$base-colorを上書きできない)

$base-color: #00FF00;

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
...

、、、と、こんな記事をうだうだ書いていたら、
本家の方でちゃんとした記事が上がってしまいました。。

ちなみに日本語版の方は、僕が翻訳して、@naotoriさんのチェック＆訂正を経た上で、公開されています。