@ Sass

Sassの変数

変数の基本

変数は、「$(ダラー)」の直後に変数名を指定し、「:(コロン)」の後に値を指定します。

style.scss

$red: #cf2d3a;
.notes {
  color: $red;
}
.notesBox {
  border: 3px double $red;
}

コンパイル後の CSS は次のようになります。

style.css

.notes {
  color: #cf2d3a;
}
.notesBox {
  border: 3px double #cf2d3a;
}

変数の命名規則

変数名は英数字の他に、_(アンダースコア)、-(ハイフン)を使うことができます。

変数名に使える文字の例

$width10: 10px;
$w-10: 10px;
$w_10: 10px;
$___w10___: 10px;
$-_-_______----w: 10px;

変数名に使えない文字の例

$10width: 10px; //数字から始まっている
$@width: 10px; //@など使えない文字から始まっている
$--width: 10px; //連続したハイフンから始まっている

ルールセット内で変数を宣言する

変数は次のようにルールセット内で使うこともできます。

test.scss

.item {
  $value: 15px;
  margin-left: $value;
  padding: $value;
  p {
    margin-bottom: $value;
  }
}

変数のスコープ

Sass はソースコードの先頭から順に処理されていくため、変数を呼び出したいルールセットよりも前で変数を宣言する必要があります。

ルールセット内で宣言された変数は、ルールセットの外側からは参照することができません。

test.scss

section {
  $value: 30px;
  margin-top: $value;
  margin-bottom: $value;
}
.item {
  $value: 15px;
  padding: $value;
  p {
    margin-bottom: $value;
  }
}

コンパイル後の CSS は次のようになります。

test.css

section {
  margin-top: 30px;
  margin-bottom: 30px;
}

.item {
  padding: 15px;
}
.item p {
  margin-bottom: 15px;
}

変数を参照できる場所

変数は基本的にプロパティの値から参照して使いますが、変数を値の一部として使ったり他から参照して使いたい場合、インターポレーション(補完)を使います。

例えば、プロパティの値だけでなく、セレクター名やプロパティ名にも使う場合、#{}を使うインターポレーションと呼ばれる書き方をします。

test.scss

$selector: 'pickupContentsArea, section.main';
$IMG_PATH: '../img/bg/';
#{$selector} {
  background: url(#{$IMG_PATH}pickup.png);
}

コンパイル後の CSS は次のようになります。

test.css

pickupContentsArea, section.main {
  background: url(../img/bg/pickup.png);
}