条件分岐

条件に応じて分岐処理を行うことができます。
条件分岐の方法は2種類あり@if文またはif関数を使用します。
@ifを使用する場合、他の条件を追加する場合は@else if文、何れも一致しない場合は@else文を使用することができます。

構文

@if文

							@ifのみの場合
							@if 条件文 {
    真の内容
}
@if + @elseの場合 @if 条件文 {
    真の内容
} @else {
    否の内容
}
@if + @else if + @elseの場合 @if 条件文 {
    真の内容
} @else if 条件文 {
    真の内容
} @else {
    否の内容
}

if関数

							if(条件式, 真の内容, 否の内容)
						

対応SASSバージョン:@if = 2.2.0+
対応SASSバージョン:@if + @else = 2.2.0+
対応SASSバージョン:@if + @else if + @else = 2.2.0+

サンプルコード

@if文

SCSS

コンパイル後:CSS

if関数

SCSS

コンパイル後:CSS

次のようにセレクターで使用することもできます。

SCSS

コンパイル後:CSS

SASS・SCSS逆引きリファレンス一覧へ戻る