Sassにおける変数のスコープについてまとめてみた

Sassで使用する変数のスコープについて確認したのでメモ。
特にグローバル変数の上書きについては、覚えておきたい。

Sassの変数のスコープ

Sassの変数には、他のプログラミング言語等と同じくスコープ(有効な範囲)があります。

グローバル変数

ネスト(入れ子)の外側で定義された変数は、グローバル変数としてどこからでも参照することができます。

ローカル変数

ネストの内側で宣言された変数は、ローカル変数として同じネスト内からのみ参照できます。

変数の書き換え

同じ変数名に対して再度値を設定することで、変数を上書きすることもできます。

グローバル変数の書き換え

グローバル変数として宣言した変数をネストの内側で書き換えた場合、そのネスト内でのみ書き換えた値になります。
ネストの外側、別のネストの内部では、グローバル変数に設定した値がそのまま使用されます。

!global フラグ

通常ネスト内で宣言した変数はそのネスト内だけで有効となりますが、!global フラグを使用することで、ネスト内であってもグローバル変数として変数を宣言・上書きすることができます。

SassSass

Posted by WebMemo