SASSでは、プログラミング言語で使われるような条件分岐(if文)や繰り返し構文(for文)を使うことができます。

今回はその中の条件分岐(if, else)について紹介します。

とりあえず記述方法(SCSS記法)

// if文
$theme: 'dark';
@if $theme == 'dark' {
  .bg {
    background-color: #666;
  }
}
@else if $theme == 'light' {
  .bg {
    background-color: #eee;
  }
}
@else {
  .bg {
    background-color: #fff;
  }
}

条件分岐(if)とはどんなもの？

まずは、条件分岐！
記述方法は、こんな感じになります。

// if文の書き方
$theme: 'dark';
@if $theme == 'dark' {
  // ここに条件が一致したときのスタイルを書く
  background-color: #333;
}

条件分岐は、ある値と別の値が条件に合うかどうかを判定してくれます。

その中でもif文は、ある値と別の値が条件に合う場合に処理をします。

例えば、上のコードだと、
変数$themeが「dark」だった場合、スタイルを当てる。
となります。

多くのプログラミング言語では == で「同じだった場合」という意味を持ちます。
これを比較演算子といいます。

他にも、 != や < とかあるので、よく使う比較演算子は覚えておくと幸せになれます。

elseを使いこなそう！

if文だけ条件が足りない場合があります。

例えば、先ほどの例だと変数 $themeが「dark」のときにスタイルを当てる記述になっていました。
じゃあ、これが「light」や「normal」「pastel」などの時はどうなると思いますか？

$theme が「dark」以外の場合は無視されてしまい、スタイルを当てることができません。

じゃあ、「dark」以外のときにスタイルを当てたいときはどうすればいいのか？
そこで登場するのが「else」なのです！

ifはある値と別の値が条件に合う場合スタイルを当ててくれます。
それに対して、elseはif文の条件以外の場合スタイルを当てます。

// dark以外の場合も処理する
@if $theme == 'dark' {
  // 条件が一致する場合
  background-color: #333;
}
@else {
  // ifの条件以外の場合
  background-color: #fff;
}

これで、「dark」以外のときは白背景に設定することができました。

さらに条件を細かくしたelse-if

さらに条件を細かくしてみましょう。
目標は下の表みたいな感じに分岐していきます。

「dark」と「その他」については現状で完成しています。

しかし、「pastel」の条件がどこにもありません。
そんなときに使うのが「else-if」になります。

「else-if」を使えば、if以外の新しい条件を加えることができます。

今回は「pastel」の場合なので次のように書きます。

@if $theme == 'dark' {
  background: #333;
}
@else if $theme == 'pastel' {
  background: #fdffe6;
}
@else {
  background: #fff;
}

また、「else-if」は何個も付けることができます。
例えば「black」を追加すると、

@if $theme == 'dark' {
  background: #333;
}
@else if $theme == 'pastel' {
  background: #fdffe6
}
@else if $theme == 'black' {
  background: #000;
}
@else {
  background: #fff;
}

こんな感じです！

if文は慣れないうちは、
「結局、どんなときに使えばいいの？」
となる場合が多いと思います。

近いうちにif文の利用例を紹介する予定なので、そちらを見てもらえるとイメージできると思います！！

というわけで、今回は以上となります！
最後までありがとうございました！！