第3章 これだけはマスターしたいSassの基本機能3-6 変数（Variables）Sample Code

1
.notes {
2
  color: #cf2d3a;
3
}
4
.notesBox {
5
  padding: 20px;
6
  border: 3px double #cf2d3a;
7
}

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

4
.notes {
5
  color: $red;
6
}
7
.notesBox {
8
  border: 3px double $red;
9
}

1
$width10: 10px;
2
$w-10: 10px;
3
$w_10: 10px;
4
$ｗｉｄｔｈ１０: 10px;
5
$横幅10px: 10px;
6
$１０px: 10px;
7
$___w10___: 10px;
8
$-_-______----w: 10px;
9
$--width10: 10px;

1
$10width: 10px; // 数字から始まっている
2
$@ｗｉｄｔｈ１０: 10px; // @など使えない記号

1
.item {
2
  $value: 15px;
3
  margin-left: $value;
4
  padding: $value;
5
  p {
6
    margin-bottom: $value;
7
  }
8
}

1
section {
2
  $value: 30px;
3
  margin-top: $value;
4
  margin-bottom: $value;
5
}
6

7
.item {
8
  $value: 15px;
9
  padding: $value;
10
  p {
11
    margin-bottom: $value;
12
  }
13
}

1
section {
2
  margin-top: 30px;
3
  margin-bottom: 30px;
4
}
5

6
.item {
7
  padding: 15px;
8
}
9
.item p {
10
  margin-bottom: 15px;
11
}

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

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

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

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

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