ホーム>技術

Sass(SCSS)で制御文@if/@else if/@elseを使用する方法

当サイトはアフィリエイト広告を利用しています。

目次

おすすめ

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか?
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく!

CodeCamp

実行環境

OSmacOS Catalina 10.15.7
Sass1.34.0

開発および実行環境がない方は、以下の記事を参考に構築してください。

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法

Sass(SCSS)で制御文@if/@else if/@elseを使用する方法

今回は、Sass(SCSS)で制御文@if/@else if/@elseを使用する方法をご紹介します。

以下の例では、@mixinで再利用可能なスタイルを指定しています。
引数として受け取った値をスタイル内で条件式に使用しています。

@mixin button($sns, $fill: true) {

  // $colorにorangeを代入
  $color: orange;
  @if $sns == twitter {
    // $snsが"twitter"の場合、$colorにdeepskyblueを代入
    $color: deepskyblue;
  } @else if $sns == fb {
    // $snsが"fb"の場合、$colorにroyalblueを代入
    $color: royalblue;
  } @else if $sns == line {
    // $snsが"line"の場合、$colorにlimeを代入
    $color: lime;
  } @else {
    // NOP
    // $colorにorangeが代入されている状態
  }

  @if $fill {
    // $fillがtureの場合
    background-color: $color;
    border: 0;
    color: white;
  } @else {
    // $fillがture以外の場合
    background-color: white;
    border: solid 2px $color;
    color: $color;
  }

  border-radius: 100%;
  font-weight: bold;
  padding: 8px 16px;
}

.button_twitter {
  @include button(twitter);
}

.button_fb {
  @include button(fb, true);
}

.button_line {
  @include button(line, false);
}

.button_custom {
  @include button(custom);
}
.button_twitter {
  background-color: deepskyblue;
  border: 0;
  color: white;
  border-radius: 100%;
  font-weight: bold;
  padding: 8px 16px;
}

.button_fb {
  background-color: royalblue;
  border: 0;
  color: white;
  border-radius: 100%;
  font-weight: bold;
  padding: 8px 16px;
}

.button_line {
  background-color: white;
  border: solid 2px lime;
  color: lime;
  border-radius: 100%;
  font-weight: bold;
  padding: 8px 16px;
}

.button_custom {
  background-color: orange;
  border: 0;
  color: white;
  border-radius: 100%;
  font-weight: bold;
  padding: 8px 16px;
}

変数や@mixinについては、以下の記事を参考にしてください。

Sass(SCSS)の基本構文5選
Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法

お疲れさまでした

Sass(SCSS)で制御文@if/@else if/@elseを使用する方法をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか?

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!