3-1. Sassで条件分岐（if文）を使うには？

1.条件分岐の「if文」とは？

プログラミング用語の1つに「条件分岐」という言葉があります。

例えば「りんごは何色？赤だったらYES、違ったらNOで答えてください」「YES」のような感じで、条件に当てはまっていたらAの動作、当てはまらなければBの動作をするといったことをする際に、条件分岐を使います。

Sassは条件分岐ができるようになっていて、Sass内でif文によって条件分岐を行うと、コンパイルされたCSSには条件分岐の結果実行された内容が出力されます。

2.Sassの条件分岐@ifの使い方

Sassで条件分岐を使うときは@ifを使います。

記述の仕方はこうなります。

@if 条件[true] {
  適用したいプロパティ: 値
}

実際に@mixinと混ぜて使うと以下のようになります。変数である$circleの値がtrueだとborder-radius（角丸）のスタイルが付くというmixinです。

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }

コンパイルします。

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

.square-avは角丸がなく、.circle-avは角丸が付きました。

3.@elseで条件に合わなかった場合の実行内容を記述する

@ifで条件を確認したとき、条件に合わなかった場合に別の処理を行いたいときは@elseを使います。

@if 条件 {
  （条件に合っている場合）適用したいプロパティ: 値
} @else {
  （条件に合っていない場合）適用したいプロパティ: 値
}

このような感じで2パターンの処理を準備しておくことができます。

@ifと@else、そして@mixinを合わせると以下のような記述ができます。

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

コンパイルします。

.banner {
  background-color: #f2ece4;
  color: #036;
}

body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}

4.@else ifで条件を追加する

@ifと@elseだけでは条件に対して2パターンの処理しか用意することができません。パターンを増やしたいときは@else ifというものを使います。

@else ifを使えばAパターン・Bパターン・それ以外と3つの条件が用意できます。

@if 条件A {
  （条件Aに合っている場合）適用したいプロパティ: 値
} @else if 条件B {
  （条件Bに合っている場合）適用したいプロパティ: 値
} @else {
  （A・B条件ともにに合っていない場合）適用したいプロパティ: 値
}

@else ifと@mixinを組み合わせると以下のようなコードが書けます。@mixinで上下左右を指定して、三角形をCSSだけで再現します。

ここでは比較演算子といって、条件にあっているかを式で表す記号が出てきます。`==`というのは左右にある値が一致しているかを確かめる比較演算子で、一致していればtrue、一致しなければfalseとなり、一致した場合は@ifや@else ifのあとの`{〜}`の内容が処理されます。

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

コンパイルします。

.next {
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 2.5px;
  border-left-color: black;
}

5.比較演算子と論理演算子について

比較演算子について

先ほどの@else ifでは比較演算子`==`が登場しましたが、他にもありますので紹介します。

論理演算子について

さきほどの比較演算子をいくつか組み合わせて条件を決めたり、比較演算子で作った条件を否定する条件のようなものを作るときに、論理演算子というものが使えます。

if文は次のレッスンで出てくる「繰り返し」と組み合わせると、さらに便利に使えるようになります。