if文を使った条件分岐[SCSS]

if文を使った条件分岐[SCSS] マークアップ

SCSSはプログラミング言語ではありません。しかし、プログラミング言語でおなじみのif文を使うことができます。基本的な書き方を見ていきましょう。

if文の書き方

if文の書き方は以下の通りです。

@if 条件1 {
  プロパティ: 値;
} @else if 条件2 {
  プロパティ: 値;
} @else {
  プロパティ: 値;
}

@else ifはいくつでも使うことができます。

例1
$text-color: red;
p {
  @if $text-color == blue {
    color: blue;
  } @else if $text-color == red {
    color: red;
  } @else {
    color: black;
  }
}

例1ではp要素のcolorが、変数$text-colorの値によって変化するように記述しています。

まとめ

  • 条件分岐には@ifを使う
  • 条件に合致しない場合は@elseに記述
  • 複数の条件を設定するには@else ifを使用

SCSSのif文の使い方は以上です。

あなたの毎日がハッピーでありますように。

コメント

タイトルとURLをコピーしました