【SCSS】if文を使って条件分岐する

プログラミング勉強日記

2021年3月13日

SCSSとは

　SCSSを説明する前に、Sassを知らないといけない。SassはCSSをより便利かつ効率的に書くことができる。SassにはSASS記法とSCSS記法の2種類の書き方がある。SCSSの拡張子は「.scss」となる。SassのメリットはCSSより記述量を減らすことができ、コードを再利用することができるところである。SCSSでは、変数を使うことができる。

変数の書き方

$text-color: blue;

if文の書き方

　if文を使うことで条件を満たす場合のみ、そのプロパティが設定される。

if文の書き方

@if <条件> {
  // 内容
}

　if-else文もif文と同じように条件を満たす場合と満たさない場合でそれぞれのプロパティが設定される。

if-else文の書き方

@if <条件> {
  // 内容
}
@else if <条件> {
  // 内容
}
@else {
  // 内容
}

サンプルプログラム

HTML

<div class="colored">
  sample
</div>

$color: blue;

.colored {
  @if $color == blue {
    color: white;
    background-color: red;
  }
  @else {
    color: white;
    background-color: blue;
  }
}

実行結果

参考文献

SCSSでのif文で条件分岐をする方法を現役エンジニアが解説【初心者向け】
Sassで「@if文の使い方」と条件分岐は「どういう時に使う」のか？