kinkateによるPixabayからの画像

条件分岐

Sassではif文が使えます。

■書き方

@if 条件式1{
  //条件式1がtrueの時の「プロパティ: 値;」
}@else if 条件式2{
  //条件式2がtrueの時の「プロパティ：値;」
}@else{
  //上記条件式がfalseの時の「プロパティ: 値;」
}

■例

$bool = true;
@if $bool == true {
  color: blue;
}@else{
  color: red;
}

ループ

each

eachは配列、連想配列のループです。

■配列のループ

$配列名: 値1, 値2;
@each $変数名 in $配列名{
  処理
}

例）
$buttonColors: blue, red, yellow;
@each $buttonColor in $buttonColors{
  .button-#{$buttonColor} {background-color: $buttonColor;}
}

■連想配列のループ

$連想配列名: (キー1: 値1, キー2: 値2);
@each $キー, $値 in $配列名{
  処理
}

例）
$hTags: (h1: 24px, h2: 18px);
@each $tag, $size in $hTags{
  #{$tag}{
    font-size: $size;
  }
}

■その他

eachは配列、連想配列でなくとも、以下のようにすると使えます。

@each $変数名 in 値1, 値2{
  処理            ↑↑配列でなくても@eachは使える
}

for

@for $変数 from 開始値 through 終了値{
  処理
}

例）
@for $i from 12 through 14{
  .font-size#{$i} {font-size: #{$i}px;}
}

while

@while 条件式{
  処理
}

例）
@while $i < = 14{
  .font-size#{$i} {font-size: #{$i}px;}
  $i : $i + 1;
}

　

Sassの条件分岐とループについては以上です。