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

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

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

 

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

 

 

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デザイン講座を開催しています。

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