sass_3-5 変数

sassは変数を作ることができる。

変数を宣言したsass

// 赤色の変数を宣言
$red: #cf2d3a;

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

書きだしたCSS

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

こんな感じで、自由に変数を作ることが出来る。
何度も使いそうな値は変数を作っておくと良さそう。

こんなふうにも使える。

変数を宣言したsass

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

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

書きだしたCSS

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

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

これは普通に想像がつくけれど、セレクタの名前やパスも入れれたりする。

$セレクタ名: '.pickupContentsArea, section.main';
$IMG_PATH: '../img/bg/';

$セレクタ名 {
  background: url($IMG_PATHpickup.png);
}

参考

Sassの変数使用時に覚えておきたい6つのこと