【Sass】変数の使い方

プログラムなどではよく使うことがる変数ですが、Sassでも変数を利用して記述することができます。ちなみに変数とは、任意の変数名に値を代入しておき、使いたい箇所で変数名を参照して、その値を呼び出すという機能です。それでは、簡単な例を見てみましょう。

//Sass
$green: #009944;

.hoge {
  color: $green;
}

//CSS
.hoge {
  color: #009944;
}

変数を宣言するには、$（ダラー）を使います。その直後に好きな名前（変数名）を指定してコロンで区切って値を指定します。あとは、任意の場所で宣言した変数名を呼び出せばいいだけです。呼び出し方は普段CSSのプロパティに値を指定するのと同じ要領で、値の代わりに使いたい変数名を指定するだけです。
変数名に関しては、英数字や記号、日本語など比較的どのような文字でも利用できますが、数字から始まる名前などいくつか使えない名前の付け方もあるそうです。

同じ値をいろいろな箇所で使用する場合には、変数を利用すると効率よくできるかもしれません。