本記事では、SCSSでif文(else if,else)の使い方・使いどころについて解説しています。
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2019/3/16 |
| ページ数 | 280ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (2,167件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
if文の使いどころ
JavaScriptなどのプログラミング言語では非常に使われるif文が、なんと！SCSSでも使用することが出来ます！どんなことが出来るんだろう！とワクワクしている方には申し訳ないですが、恐らく使う機会は多くありません。
私が所属しているチームでは、誰一人としてif文を使用していませんでした。。そもそもif文の機能を知らない方もいると思います。
実際、私も現場で使用したことが無いため的確な使いどころが分かりませんが、@mixinと組み合わせて引数にif文の条件式で使用するフラグを渡しスタイルを変更するのが主流？な使い方らしいです。
個人的な意見ですが、使い慣れていないif文を使用してややこしいコードになるなら今まで通りにコーディングした方が良いと思います。
if文の使い方
.scssファイル内で条件分岐のif文を使用する書き方は以下の通りです。
@if 条件式 {
/* 条件式に一致した時に適用させたいcssを指定 */
}if文を使用する際には、必ず@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以下 |
| 論理演算子 | 意味 |
|---|---|
| and | かつ(全ての条件式を満たせばOK) |
| or | または(一つの条件式を満たせばOK) |
| not | 否定 |
else ifの使い方
if文の条件式に一致しなかった場合に、次の条件式と比較させたい時があります。そのような時はelse ifを使用します。
@if 条件式 {
/* if文の条件式に一致した時に適用させたいcssを指定 */
}@else if 条件式 {
/* else if文の条件式に一致した時に適用させたいcssを指定 */
}else ifは一つだけでなく複数追加することも可能です。
@if 条件式 {
/* if文の条件式に一致した時に適用させたいcssを指定 */
}@else if 条件式 {
/* else if文の条件式に一致した時に適用させたいcssを指定 */
}@else if 条件式 {
/* else if文の条件式に一致した時に適用させたいcssを指定 */
}elseの使い方
ifとelse ifで設定した全ての条件式に一致しなかった時に、特定のプロパティと値を設定したい場合はelseを使用します。
@if 条件式 {
/* if文の条件式に一致した時に適用させたいcssを指定 */
}@else if 条件式 {
/* else if文の条件式に一致した時に適用させたいcssを指定 */
}@else {
/* 全ての条件式に一致しなかった時に適用させたいcssを指定 */
}実践
最後にif文と@mixin/@includeを組み合わせたサンプルコードを紹介します。
@mixin/@includeと使い方が分からない人はこちらの記事をご覧ください。
@mixin btnStyle($bgColor) {
.btn {
@if $bgColor == #f00 {
background-color: $bgColor;
color: #fff;
} @else if $bgColor == #0f0 {
background-color: $bgColor;
color: #000;
} @else {
background-color: #fff;
color: #000;
}
}
}
.section1 {
@include btnStyle(#f00);
}
.section2 {
@include btnStyle(#0f0);
}
.section3 {
@include btnStyle(#00f);
}.section1 .btn {
background-color: #f00;
color: #fff;
}
.section2 .btn {
background-color: #0f0;
color: #000;
}
.section3 .btn {
background-color: #fff;
color: #000;
}
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
