条件分岐 @if , @else , @else if
Sass では、 @if , @else , @else if を使用することで、条件分岐処理を記述することができます。
@if
次の例は、 $width に文字列「auto」が渡された場合と、サイズに関する値が渡された場合で処理を分けます。
@mixin _col--width($width) {
@if ('auto' == $width) {
width: auto;
} @else {
width: $width;
}
}
実際に 定義した mixin を使用するよう次のように記述します。
.col {
padding: 1em;
border-left:1px solid #795548;
@include _col--width(auto);
}
この SCSS をコンパイルすると渡された「$width」の値と「文字列 ‘auto’」が同じであるか評価されます。今回のケースでは、「auto」が渡されているため 「 width: auto 」が返されます。
.col {
padding: 1em;
border-left: 1px solid #795548;
width: auto; }
Sass の条件分岐は、 @else や @else if を使うことにより次のように記述することで複数の条件を評価することができます。
@if 条件A {
適用したいプロパティ: 値
} @else if 条件B {
適用したいプロパティ: 値
} @else {
適用したいプロパティ: 値
}
比較演算子と論理演算子
条件式を評価する演算子をまとめておきます。
比較演算子
| 演算子 | 例 | 意味 |
|---|---|---|
| == | a==b | aとbは等しい |
| != | a!=b | aとbは等しくない |
| > | a>b | aはbより大きい |
| < | a<b | aはbより小さい |
| >= | a>=b | aはbより大きいか等しい |
| <= | a<=b | aはbより小さいか等しい |
論理演算子
| 演算子 | 例 | 意味 |
|---|---|---|
| and | a and b | a と b が共に真 |
| or | a or b | aもしくはbが真 |
| not | not a | aが真でない |
if 関数
Sass では、 @if とは別に 「if 関数」と呼ばれるものも用意されています。これは Java 言語や C 言語の三項演算子のように使用使うことができます。
if(true, 1px, 3px) //-> 1px
if(false, 1px, 3px) //-> 3px
if 関数の特徴として、第2パラメータ、第3パラメータの部分に式を指定した場合、それぞれの値が返されるケースでのみ式が評価されます。式が評価できない場合は、そのパラメータは使用されません。