読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

Sassでグローバル変数を書き換えるときは!globalフラグを付けるとよさ気

regular sass

案件が落ち着いてきたので今までちゃんと勉強してこなかった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』を使うことは無いだろうけど、覚えておいたほうが良さそうですね。

参考URL