SCSS

【SCSS】if文(else if,else)の使い方・使いどころ

本記事では、SCSSでif文(else if,else)の使い方・使いどころについて解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

if文の使いどころ

JavaScriptなどのプログラミング言語では非常に使われるif文が、なんと!SCSSでも使用することが出来ます!どんなことが出来るんだろう!とワクワクしている方には申し訳ないですが、恐らく使う機会は多くありません。

私が所属しているチームでは、誰一人としてif文を使用していませんでした。。そもそもif文の機能を知らない方もいると思います。

実際、私も現場で使用したことが無いため的確な使いどころが分かりませんが、@mixinと組み合わせて引数にif文の条件式で使用するフラグを渡しスタイルを変更するのが主流?な使い方らしいです。

個人的な意見ですが、使い慣れていないif文を使用してややこしいコードになるなら今まで通りにコーディングした方が良いと思います。

if文の使い方

.scssファイル内で条件分岐のif文を使用する書き方は以下の通りです。

@if 条件式 {
  /* 条件式に一致した時に適用させたいcssを指定 */
}

if文を使用する際には、必ず@ifを先頭に付けます。その後に条件式を設定します。条件式にはプログラミング言語を触ったことのある人ならお馴染みの比較演算子・論理演算子を使用することが出来ます。

比較演算子意味
A == BAとBは同じ
A!=BAとBは異なる
A > BAはBより大きい
A < BAはBより小さい
A>=BAはB以上
A <= BAは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;
}

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村