icon
icon

SCSSでのif文で条件分岐をする方法を現役エンジニアが解説【初心者向け】

初心者向けにSCSSでのif文で条件分岐をする方法を現役エンジニアが解説しています。SCSSはCSSに対して機能を拡張した言語になります。変数やセレクタのネスト、ミックスイン、セレクタの継承などが出来ます。今回は変数やif文の使い方を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

SCSSでのif文で条件分岐をする方法について解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

SCSSでのif文で条件分岐をする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

SCSSで使えるif文とは

SCSSでは以下のように変数を使用することができます。

 

$text-color: red;

 

if文とは条件分岐を行うための構文です。if文を使うことで、変数の値によってプロパティを切り替えることができます。

 

SCSSでのif文の書き方

大きく分けて if文、if~else文、if~else if~else文 という3つの書き方があります。

if文は @if <条件> {<設定内容>}と書いて、条件文を満たす場合のみプロパティが設定されます。
 

$red: true;
div.colored {
  @if $red {
    color: red;
  }
}

 

if~else文は @if <条件> {<設定内容a>} @else {<設定内容b>}と書いて、条件文を満たす場合と満たさない場合それぞれのプロパティが設定されます。
 

$red: false;
div.colored {
  @if $red {
    color: red;
  }
  @else {
    color: blue;
  }
}

 

if~else if~else文は @if <条件a> {<設定内容a>} @else if <条件b> {<設定内容b>} @else {<設定内容c>}と書いて、複数の条件でプロパティを設定できます。

条件を複数書きたい場合にはelse if部分を必要な数だけ書くことができます。また、最後のelse文が不要な場合は記載しなくても構いません。

 

$color: green;
div.colored {
  @if $color == red {
    color: red;
  }
  @else if $color == green {
    color: green;
  }
  @else {
    color: blue;
  }
}

 

[PR] Webデザインで副業する方法とは

実際に書いてみよう

まずはif文の書き方です。
 

HTML

<div class="red">
  aaa
</div>

<div class="blue">
  aaa
</div>

 

CSS(SCSS)

$red: 0;
$blue: 1;

div.red {
  @if $red == 1 {
    color: white;
    background-color: blue;
  }
}

div.blue {
  @if $blue == 1 {
    color: white;
    background-color: blue;
  }
}

 

 

次にif~else文です。条件文を満たさないので、else文の設定が適用されています。

 

HTML

<div class="colored">
  aaa
</div>

 

CSS(SCSS)

$color: red;

div.colored {
  @if $color == blue {
    color: white;
    background-color: blue;
  }
  @else {
    color: white;
    background-color: red;
  }
}

 

 

次にif~else if~else文です。1つ目の条件文から順番にチェックしていき、3番目の条件文と一致するので背景色が緑色の設定が適用されています。
 

CSS(SCSS)

$color: green;

div.colored {
  @if $color == blue {
    color: white;
    background-color: blue;
  }
  @else if $color == yellow {
    color: white;
    background-color: yellow;
  }
  @else if $color == green {
    color: white;
    background-color: green;
  }
  @else {
    color: white;
    background-color: red;
  }
}

 

 

この記事を監修してくれた方

メンター稲員さん。
フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby,Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。