「!global」でローカル変数をグローバル変数にする

普段はSassを使っているので、パッケージのテンプレートでもない限りは使わないLessですが、Sassと変数の有効範囲に違いがあります。

a{
$black:#000;
color:$black;
}

 この場合、Lessではaタグでしか$blackの指定は通りません。
Sassはaタグ以外でも問題なく使えます。

 

a{
$black:#000 !global;
color:$black;
}

しかし、末尾に「!global」を付けることで、LessでもSassと同じ解釈(ここ以降に記述してある全てに指定が適用できる)になります。