制御構文

SASSではifやforなどの基本的な制御構文が使えます。

条件分岐

「@if」を使います。

@if <条件>
  ...<処理>
@else if <条件>
  ...<処理>
@else
  ...<処理>

以下はフラグを見てCSSプロパティを切り替える例です。

!debug = true

div
  // フラグをみてプロパティを切り替える例 
  @if !debug
    border: 1px solid #FF4444
  @else
    border: 1px solid #888888

変換結果です。

div {
  border: 1px solid #FF4444;
}

ループ

「for」と「while」が使えます。

@for <変数名> from <開始値> to <終了値>
  ...<処理>
  
@for <変数名> from <開始値> through <終了値>
  ...<処理>
  
@while <条件>
  ..<処理>

以下はループでグラデーションを作る例です。

@for !i from 1 to 4
  .foo#{!i}
    color = #111 * !i 
  
@for !i from 1 through 4
  .var#{!i}
    color = #211 * !i 

!i = 1
@while !i < 3
  .hoge#{!i}
    color = #012 * !i 
  !i = !i + 1

変換結果です。

.foo1 {
  color: #111111;
}

.foo2 {
  color: #222222;
}

.foo3 {
  color: #333333;
}

.var1 {
  color: #221111;
}

.var2 {
  color: #442222;
}

.var3 {
  color: #663333;
}

.var4 {
  color: #884444;
}

.hoge1 {
  color: #001122;
}

.hoge2 {
  color: #002244;
}