第4章 高度な機能を覚えてSassを使いこなそう

4-3 制御構文 で条件分岐や繰り返し処理を行う

@if を使って条件分岐をする

// 汎用的なclassを使うかどうか
$generalStyle: true;

@if $generalStyle {
	.fl {
		float: left;
	}
	.fr {
		float: right;
	}
}

$getStyle: 0;

@mixin style {
	@if $getStyle == 1 {
		margin: 0 0 30px;
		padding: 15px;
		background: #eee;
	}
	@else if $getStyle == 2 {
		margin: 0 10px 15px;
		padding: 20px 15px;
		border: 2px solid #333;
	}
	@else {
		margin: 0 0 10px;
	}
}

.box {
	@include style;
}

.box {
  margin: 0 0 10px;
}

.box {
  margin: 0 10px 15px;
  padding: 20px 15px;
  border: 2px solid #333;
}

@for で繰り返し処理を行う

@for $value from 1 through 3 {
	.throughSample_#{$value} {
		margin-bottom: 1px * $value;
	}
}

@for $value from 1 to 3 {
	.toSample_#{$value} {
		margin-bottom: 1px * $value;
	}
}

.throughSample_1 {
  margin-bottom: 1px;
}

.throughSample_2 {
  margin-bottom: 2px;
}

.throughSample_3 {
  margin-bottom: 3px;
}

.toSample_1 {
  margin-bottom: 1px;
}

.toSample_2 {
  margin-bottom: 2px;
}

@for $value from 1 through 2 {
	.mt_#{$value * 10} {
		margin-top: 10px * $value;
	}
	.mb_#{$value * 10} {
		margin-bottom: 10px * $value;
	}
}

.mt_10 {
  margin-top: 10px;
}
.mb_10 {
  margin-bottom: 10px;
}
.mt_20 {
  margin-top: 20px;
}
.mb_20 {
  margin-bottom: 20px;
}

@while でより柔軟な繰り返し処理を行う

$value: 20;
@while $value > 0 {
	.mt_#{$value} {
		margin-top: #{$value}px
	}
	.mb_#{$value} {
		margin-bottom: #{$value}px
	}
	$value: $value - 10;
}

$index: 300;
@while $index > 200 {
	.box_#{$index} {
		width: 2px * $index;
	}
	$index: $index - 32;
}

.box_300 {
  width: 600px;
}

.box_268 {
  width: 536px;
}

.box_236 {
  width: 472px;
}

.box_204 {
  width: 408px;
}

@each で配列の要素に対して処理を実行する

.body-top {
	background-image: url(../img/bg_top.png);
}
.body-about {
	background-image: url(../img/bg_about.png);
}
.body-company {
	background-image: url(../img/bg_company.png);
}
.body-contact {
	background-image: url(../img/bg_contact.png);
}

$nameList: top, about, company, contact;

@each $name in $nameList {
	.body-#{$name} {
		background-image: url(../img/bg_#{$name}.png);
	}
}