Sassメモ：変数を使って値を統一しよう

変数を設定しておくことで、CSSの値の統一性を取れます。
下記はSass記法例。

$gray: #999;
$red: #f00;
$blue: #00f;
.red {
  color: $red;
}
.error {
  color: $red;
  font-weight:bold;
}

画像フォルダへのパスなども変数化しておくと楽です。

$imgDir: '../img/';
.box {
  background: url(#{$imgDir}gazou.png);
}

前者ではプロパティ値に直接変数を呼び出していますが、後者のようにプロパティ値の途中で変数を呼び出す時は「#{}」を使います。