第3章これだけはマスターしたいSassの基本機能

3-5 変数（Variables）

変数の基本

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

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

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

変数名で使える文字と使えない文字

$width10: 10px;
$w-10: 10px;
$w_10: 10px;
$ｗｉｄｔｈ１０: 10px;
$横幅10px: 10px;
$１０px: 10px;
$___w10___: 10px;
$-_-______----w: 10px;
$変数はSassの便利な機能の一つです。: black;

$10width: 10px;  // 数字から始まっている
$@ｗｉｄｔｈ１０: 10px;  // @など使えない記号
$--width: 10px;  // 連続したハイフンから始まっている

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

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

変数の参照範囲（スコープ）

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

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

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);
}

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

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

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