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

$value: 30px;

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

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

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