■@if
「もし～ならば～を実行する」と言うような、「特定の条件」をもとに、その後の処理を行います。@else if や @else と組み合わせることで条件を増やすこともできます。

---------------------
▼Sass
$use_generalStyle: true;

@if $use_generalStyle {
	.fl {
		float: left;
	}
	.fr {
		float: right;
	}
}
---------------------
▼CSS（コンパイル後）
.fl {
  float: left;
}

.fr {
  float: right;
}
---------------------


■@for
繰り返しの命令文の一つで、@for を使うことで指定した開始の数値から終了の数値まで、1つずづ増やしながら繰り返して処理されます。

---------------------
▼Sass
@for $i from 1 through 3 {
	.through-sample_#{$i} {
		margin-bottom: 1px * $i;
	}
}

@for $i from 1 to 3 {
	.to-sample_#{$i} {
		margin-bottom: 1px * $i;
	}
}
---------------------
▼CSS（コンパイル後）
.through-sample_1 {
  margin-bottom: 1px;
}
.through-sample_2 {
  margin-bottom: 2px;
}
.through-sample_3 {
  margin-bottom: 3px;
}

.to-sample_1 {
  margin-bottom: 1px;
}
.to-sample_2 {
  margin-bottom: 2px;
}
---------------------


■@while
@for と似たような繰り返し処理を行う命令文の一つで@for より複雑な繰り返し処理を行うことができます。

---------------------
▼Sass
$i: 20;
@while $i > 0 {
	.mt#{$i} {
		margin-top: #{$i}px
	}
	.mb#{$i} {
		margin-bottom: #{$i}px
	}
	$i: $i - 10;
}
---------------------
▼CSS（コンパイル後）
.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}
---------------------


■@each
配列の要素それぞれに対して記述した処理を実行して出力することができます。

---------------------
▼Sass
$setBG: top, about, company;

@each $i in $setBG {
	.body-#{$i} {
		background-image: url(../img/bg_#{$i}.png);
	}
}
---------------------
▼CSS（コンパイル後）
.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);
}
---------------------