Sassでグローバル変数を書き換えるときは!globalフラグを付けるとよさ気
案件が落ち着いてきたので今までちゃんと勉強してこなかったSassを勉強しようと『Web製作者のためのSassの教科書』を読み始めました。
変数の書き方など初歩的なことから案件で使えるようなコードまで載ってて素晴らしいですね。
もっと早く読めばよかった。
そんなSassの教科書を読んでて気づいたことがあったのでメモ。
以下の様なサンプルコードを書いている時でした。ちょっと内容を変えています。
$value: 100px; .boxA { $value: 200px; width: $value; }
グローバル変数である$valueの値を書き換えて、プロパティの値を書き換えています。
このコードをコンパイルすると警告文が出てきました。
DEPRECATION WARNING on line 4 of test.scss:
Assigning to global variable "$value" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$value: 200px !global" instead.
Note that this will be incompatible with Sass 3.2.
『グローバル変数への値の代入は推奨されていません。
近い将来、ローカル変数が新しく作成されます。
もしグローバル変数の値を変える場合は"$value: 200px !global"の様に!globalを付けてください。』
的な感じですかね...。
調べてみるとSass3.3からこのような仕様になったみたいです。
Sassの教科書の発売後だから教科書には載っていなかったのか。
僕の使っている範囲だとグローバル変数を書き換えることはしないので『!global』を使うことは無いだろうけど、覚えておいたほうが良さそうですね。