制御構文

ここから先はJavaScriptやPHPなどある程度プログラムを習った人向きです。
Sassでプログラムを組んで何らかの条件一致があったときにそれにそったcssを書き込んだり、特定条件が適応してる間にスタイルシートの繰り返しを命令する制御構文です。

@ifを使って条件分岐

if文で変数の値が"true(真)"か"false(偽)"かを判断して
"true"の場合にコンパイル処理する記述をします。

ifの接頭詞として"@"を付けます。

sass

$value :true;

@if $value{
 h1{
	 font-size: 36px;
	}
}

css(コンパイル後)

h1 {
  font-size: 36px;
}

続いて"@if"に加え"@else if"と"@else" を足して条件を少し複雑にしてみます。

これらの文をミックスインして結果を指定のセレクタに当てます。

sass

$number : 3;

@mixin style{
	
@if $number == 1 {
	font-size: 36px;
	}
@else if $number == 2 {
	font-size: 24px;
	}
@else {
	font-size: 12px;
	}
}

.main_content{
 @include style;
}

css(コンパイル後)

.main_content {
  font-size: 12px;
}

このように"$number"の値が"1"でも"2"でも無いため最後のどの条件にも当てはまらない場合の"font-size: 12px;"が".main_content"のスタイルとして選択制御されました。

@forで繰り返し処理

@forで繰り返し処理を施します。
@for~throughと@for~toで繰り返し回数が異なります。

---

@for $変数名 from 開始位置　through 終了位置{
~css文~
}

---

sass

@for $value from 1 through 3{
 .contentNo_#{$value}{
	 width:100px;
	 height:100px * $value ;
	 }
}

css(コンパイル後)

.contentNo_1 {
  width: 100px;
  height: 100px;
}

.contentNo_2 {
  width: 100px;
  height: 200px;
}

.contentNo_3 {
  width: 100px;
  height: 300px;
}

---

@for $変数名 to 開始位置　to 終了位置{
~css文~
}

---

sass

@for $value from 1 to 3{
 .contentNo_#{$value}{
	 width:100px;
	 height:100px * $value ;
	 }
}

css(コンパイル後)

.contentNo_1 {
  width: 100px;
  height: 100px;
}

.contentNo_2 {
  width: 100px;
  height: 200px;
}

@whileで繰り返し処理

@whileで@forのように繰り返し処理を行います。
@whileの利点は@forよりも柔軟性があるので少し凝った制御が出来ます。

---

@while 繰り返し条件{
~css文~
繰り返し方
}

---

scss文

$value : 20;

@while $value > 9{
 .contentNo_#{$value}{
	width: 100px * $value;
   }
 .sideNo_#{$value}{
	height: 100px * $value;
   }
   
  $value : $value - 5;
}

css(コンパイル後)

.contentNo_20 {
  width: 2000px;
}

.sideNo_20 {
  height: 2000px;
}

.contentNo_15 {
  width: 1500px;
}

.sideNo_15 {
  height: 1500px;
}

.contentNo_10 {
  width: 1000px;
}

.sideNo_10 {
  height: 1000px;
}

@eachでリスト(配列）の中身を繰り返し処理

@eachはカンマ区切りで並べた配列(複数データ)を含む変数を
別の変数に格納させ、配列要素が出し尽くすまで繰り返し処理ができます。

---

@each $変数名 inリスト{
~css文~
}

---

scss文

$title_list : top,about,product,contact;

@each $page_title in $title_list{
 body.#{$page_title}{
	background-image: url(img/bg_#{$page_title}.jpg);
	}
}
}

css(コンパイル後)

body.top {
  background-image: url(img/bg_top.jpg);
}

body.about {
  background-image: url(img/bg_about.jpg);
}

body.product {
  background-image: url(img/bg_product.jpg);
}

body.contact {
  background-image: url(img/bg_contact.jpg);
}