最終更新日：
公開日：
レシピ
Sass
Sassの書き方（if文）
Sassで@ifを使った条件分岐の書き方について解説します。
この記事のポイント
- Sassの条件分岐では@if、@else if、@elseを使う
- 条件式では==や<などの比較演算子、andやorなどの演算子を組み合わせて使うことができる
- 論理演算子や(〜)を使って複数の条件式を指定することができる
目次
if文を使った条件分岐
Sassは@if、 @else if、@elseを使ってif文の条件分岐を書くことができます。
以下の例では変数$vに入っている値から適用するCSSを切り替えます。
style.scss
// 変数の設定
$v: 2;
@if $v == 1 {
main {
margin: 20px 0;
padding: 20px;
}
}
@else if $v == 2 {
main {
margin-bottom: 80px;
padding: 40px;
}
}
@else {
main {
padding: 40px;
}
}@if、 @else ifは半角スペースを入れてすぐ後ろに条件式を指定します。
また、条件式では(〜)を使うことができるので、JavaScriptのif文のように@if(条件式)のような書き方をすることも可能です。
(〜)を使うと、@ifの直後は半角スペースでなくてもエラーになりません。
style.scss
@if($v1) {
@debug "true";
}
@else {
@debug "false";
}条件式では以下の比較演算子と論理演算子を使うことができます。
@ifの条件式で使うことができる比較演算子
| 比較演算子 | 比較する内容 |
|---|---|
| A == B | AとBが等しい |
| A != B | AとBは等しくない |
| A < B | AはBより小さい |
| A > B | AはBより大きい |
| A <= B | AはB以下 |
| A >= B | AはB以上 |
@ifの条件式で使うことができる論理演算子
| 論理演算子 | 内容 |
|---|---|
| A and B | AかつB（どちらもtrue） |
| A or B | AまたはB（いずれかがtrue） |
| A not B | AでもBでもない（どちらもfalse） |
条件式でtrueになる値、falseになる値
@if、@else ifの条件式はtrueのときに{〜}内の処理を実行しますが、以下の変数の値を条件式で判定すると$v2のfalseと$v9のnull以外は全てtrueの判定になります。
style.scss
// 変数の設定
$v1 : true;
$v2 : false;
$v3 : 1;
$v4 : 0;
$v5 : 2;
$v6 : -1;
$v7 : 'a';
$v8 : 'false';
$v9 : null;
@if $v1 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v2 {
@debug "true";
}
@else {
@debug "false"; // Debug: false
}
@if $v3 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v4 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v5 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v6 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v7 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v8 {
@debug "true"; // Debug: true
}
@else {
@debug "false";
}
@if $v9 {
@debug "true";
}
@else {
@debug "false"; // Debug: false
}複数の条件式を書く
@if、@else ifの条件式は論理演算子を使うことで複数の条件を組み合わせることができます。
また、条件式では(〜)を使って複数の条件をまとめることもできます。
JavaScriptなど他のプログラミング言語を使ったことがある方にはおなじみの構文です。
style.scss
// 変数の設定
$page_name : 'product';
$param : 1;
@if $page_name == 'main' and $param == 1 {
@debug "main";
} @else if $page_name == 'main' or ($page_name == 'product' and $param == 1) {
@debug "product";
} @else {
@debug "etc";
}ちなみに、Sassではswitchの構文は用意されていません。
条件分岐を使いたいときは@ifを使う必要があります。