本記事では、SCSSでif文(else if,else)の使い方・使いどころについて解説しています。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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;
}
