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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、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] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

まずは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では初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。