Sassの変数

繰り返し使いたい値を管理することができる。
Sassの変数は$(ドルマーク)の後に変数名を記述し、:(コロン)の後に値を指定する。
変数の呼び出しも同じように使いたいプロパティの値に$変数名と入力することで、任意の場所に呼び出すことが可能。

$gray: #c0c0c0;
.text{
  background-color: $gray;
}

通常Sass変数を参照できる場所はプロパティの値のみとなっており、下記のようにセレクタ名やURLの一部などで参照しようとするとエラーになる。

$selector: '.section-title-wrapper';
$serector{
  border-bottom: solid 1px #cccccc;
} 

$IMAGE: '../../common/image/';
.category-image {
  background-image :url($IMAGEcategory001.jpg);
}

この場合は#{}の中に変数名を記述すると解決できる。これをインターポレーション（補完）という。

$selector: '.section-title-wrapper';
#{$selector}{
  border-bottom: solid 1px #cccccc;
} 
 
$IMAGE: '../../common/image/';
.category-image {
  background-image :url(#{$IMAGE}category001.jpg);
}
inserted by FC2 system