もしもこんなことがあったら・・・

if文

さっそく、おなじみのif文からやってきましょう。
if文も２通りの書き方があるようなのです。

p {
  color: if(5 > 3, red, blue);
}

if(【判定条件】,【trueの場合の戻り値】,【falseの場合の戻り値】)

p {
  color: @if $a == $b{#ddd};
  color: @if $a == $b{#ddd} @elseif $a != $b and $a == $c { #fff } @else { #ddd };
}

@if 【条件判定】 { 【条件true時】 } @elseif 【判定条件】 { 【@elseifの条件true時】 } @else { 【全てfalseだった時】 }

ちょっと横に伸ばすとわかりにくいですが、複雑なif文も書けるようです。
@がついたりつかなかったりでややこしい感じですが慣れていくしか無いですね。

for

繰り返し処理です。
条件文付きの繰り返しとなります。

for $i from 0 through 3{
  .test$i { margin:$i+'px' }
}
/*
.test0{ margin:0px }
.test1{ margin:1px }
.test2{ margin:2px }
.test3{ margin:3px }
*/

for $i from 0 end 3{
  .test$i { margin:$i+'px' }
}
/*
.test0{ margin:0px }
.test1{ margin:1px }
.test2{ margin:2px }
*/

for 【ループ数値変数】 from 【ループ開始数】 through 【ループ終了数】
for 【ループ数値変数】 from 【ループ開始数】 end 【ループ終了数】

さてさて 基本的には一緒なのですが、一部違う所がありますね
【through】と【end】です。
どちらもループ終了条件の指定の意味ですが
以下の意味をもちます。

through

【ループ数値変数】が【ループ終了数】と同じになるまで繰り返します。
いわゆる 【<=】 です。

end

【ループ数値変数】が【ループ終了数】未満の時繰り返します。
いわゆる 【<】 です。

each

配列 / mapをループして吐き出す事ができます。

//-----------------------------------------
// 配列のeach
//-----------------------------------------
$colorName:red, green, blue;
@each $color in $colorName {
  .color-#{$color} { color: $color; }
}
/*
.color-red { color: red; }
.color-green { color: green; }
.color-blue { color: blue; }
*/

//-----------------------------------------
// オブジェクトのeach
//-----------------------------------------
$data :
(
  h1:("color":red,"width":10px),
  h2:("color":red,"width":12px),
  h3:("color":blue,"width":15px)
);

@each $h, $detailDatas in $data {
  #{$h} {
    @each $name, $prop in $detailDatas {
      #{$name}:$prop;
    }
  }
};
/*
h1{color:red;width:10px;}
h2{color:red;width:12px;}
h3{color:blue;width:15px;}
*/

each内でeachすることで、多次元配列にも対応することができます。わっしょい。

while

いつもの条件に一致するだけループします
無限ループ事故発生注意

//-----------------------------------------
// while
//-----------------------------------------
$i: 1;
@while $i <= 100 {
  @if $i%10==0 
  {
    mt#{$i}{margin-top:$i+px}
  }
  $i:$i+1;
}

/*
mt10 { margin-top: 10px; }
mt20 { margin-top: 20px; }
mt30 { margin-top: 30px; }
mt40 { margin-top: 40px; }
mt50 { margin-top: 50px; }
mt60 { margin-top: 60px; }
mt70 { margin-top: 70px; }
mt80 { margin-top: 80px; }
mt90 { margin-top: 90px; }
mt100 { margin-top: 100px; }
*/

わぁーーべんりーーー