SCSSで条件分岐を使用

SCSSで条件分岐を使用

SCSSで条件分岐を使用する方法について説明します。
SCSS（Sassy CSS）は、CSSの拡張機能を提供するCSSプリプロセッサです。
条件分岐は、SCSSでスタイルを動的に制御するための便利な機能です。

条件分岐の基本

SCSSでは、@ifディレクティブを使って条件分岐を実装できます。
これにより、特定の条件に基づいてスタイルを適用することができます。

基本的な構文

@if 条件 {
  // 条件が真の場合に適用されるスタイル
}

例：変数を使用した条件分岐

例えば、テーマを切り替える場合に、変数を使って条件分岐を行うことができます。

$theme: dark;

body {
  @if $theme == light {
    background-color: #fff;
    color: #000;
  } @else if $theme == dark {
    background-color: #000;
    color: #fff;
  }
}

このコードでは、$theme変数の値によって、body要素の背景色と文字色が変わります。

例：ミックスインと条件分岐

ミックスインと条件分岐を組み合わせて、複雑なスタイルの条件分岐を実現することもできます。

@mixin button-style($type) {
  @if $type == primary {
    background-color: blue;
    color: white;
  } @else if $type == secondary {
    background-color: gray;
    color: black;
  }
}

button {
  @include button-style(primary);
}

この例では、button-styleミックスインにprimaryという引数を渡して、ボタンのスタイルを設定しています。

例：ネストされた条件分岐

条件分岐はネストして使用することもできます。
これにより、複雑なスタイルの条件分岐が可能になります。

$device: mobile;

.container {
  @if $device == mobile {
    padding: 10px;
    @if $device == tablet {
      padding: 20px;
    }
  } @else {
    padding: 30px;
  }
}

この例では、$device変数に基づいて、containerクラスのpaddingが異なります。
さらに、mobileの場合にはtabletもチェックして追加のスタイルが適用されます。

まとめ

SCSSでの条件分岐は、@ifディレクティブを用いることで、動的にスタイルを制御する強力な機能です。
変数やミックスインを利用して、複雑な条件分岐を簡潔に記述することができ、スタイルのメンテナンスや拡張が容易になります。