Sass(Scss) Memo: @if

今回は@ifについてです。

@if@else if@elseが使えます。
こんな感じ。

Scss
$var1: aaa;

@if $var1 == 'bbb' {
    /* A:$var1 が bbb の場合に出力される */
} @else if $var1 == 'ccc' {
    /* B:最初の条件を満たさず、$var1 が ccc の場合に出力される */
} @else if $var1 == 'aaa' {
    /* C:2つの条件を満たさず、$var1 が aaa の場合に出力される */
} @else {
    /* D:それ以外の場合に出力される */
}
出力結果のCSS
/* C:2つの条件を満たさず、$var1 が aaa の場合に出力される */

条件の判別には==だけでなく他の比較演算子(<, <=, >, >=, !=)も使えます。

Scss
$var1: aaa;
$var2: 5;
$var3: true;

@if $var2 != 1 {
    /* A:$var2 が 1 以外の場合に出力される */
}

@if $var2 > 10 {
    /* B:$var2 が 10よりも多い場合に出力される */
} @else if $var2 < 10 {
    /* C:$var2 が 10よりも少ない場合に出力される */
} @else if $var2 >= 10 {
    /* D:$var2 が 10以上の場合に出力される */
} @else if $var2 <= 10 {
    /* E:$var2 が 10以下の場合に出力される */
}

@if $var3 {
    /* F:$var3 が trueか何か値が入ってれば出力される */
}
出力結果のCSS
/* A:$var2 が 1 以外の場合に出力される */
/* C:$var2 が 10よりも少ない場合に出力される */
/* F:$var3 が trueか何か値が入ってれば出力される */

論理演算子の&&||!は使えませんでしたが、andornotを使うことができました。

Scss
$var1: aaa;
$var2: 5;
$var3: true;
$var4: false;

@if $var1 and $var3 {
    /* $var1 と $var4 がどちらも true であれば出力される */
}

@if $var1 or $var4 {
    /* $var1 か $var4 のいずれかが true であれば出力される */
}

@if not $var4 {
    /* $var4 が true でなければ出力される */
}

@if ((not $var1) or $var3) and $var2 {
    /* 組み合わせてみたり... */
}
出力結果のCSS
/* $var1 と $var3 がどちらも true であれば出力される */
/* $var1 か $var4 のいずれかが true であれば出力される */
/* $var4 が true でなければ出力される */
/* 組み合わせてみたり... */

と、色々できますが後で読みづらくならないように気をつけたいですね、複数人で作業する場合は特に。