SCSSで条件式を使用

SCSSで条件式を使用

SCSS（Sassy CSS）では条件式を使用して、スタイルの適用や変更を柔軟に制御することができます。
条件式を使うことで、特定の条件に応じて異なるスタイルを適用することが可能です。
ここでは、SCSSで条件式を使用する基本的な方法について説明します。

SCSSの条件式の基本

SCSSでは、条件式（@if）を使用して、スタイルの適用条件を指定することができます。
基本的な構文は次の通りです。

@if 条件 {
  // 条件が真の場合のスタイル
} @else {
  // 条件が偽の場合のスタイル
}

例1: 変数を使った条件式

以下の例では、変数を使って条件式を設定し、異なる背景色を適用しています。

$theme: dark;

.box {
  @if $theme == light {
    background-color: #fff;
    color: #000;
  } @else {
    background-color: #333;
    color: #fff;
  }
}

このコードでは、変数 $theme が light に設定されている場合は白い背景と黒い文字が適用され、それ以外の場合は黒い背景と白い文字が適用されます。

例2: ネストされた条件式

条件式をネストして複数の条件を組み合わせることもできます。

$theme: dark;
$variant: primary;

.box {
  @if $theme == light {
    background-color: #fff;
    color: #000;

    @if $variant == primary {
      border: 1px solid #007bff;
    } @else {
      border: 1px solid #6c757d;
    }
  } @else {
    background-color: #333;
    color: #fff;

    @if $variant == primary {
      border: 1px solid #0056b3;
    } @else {
      border: 1px solid #343a40;
    }
  }
}

このコードでは、$theme と $variant の値に基づいて背景色、文字色、およびボーダーの色が決定されます。

例3: 関数を使った条件式

条件式の中で関数を使うこともできます。
関数を使用することで、より複雑な条件を設定することができます。

@function is-dark($color) {
  @return (lightness($color) < 50%);
}

.box {
  $bg-color: #333;

  @if is-dark($bg-color) {
    color: #fff;
  } @else {
    color: #000;
  }
}

このコードでは、is-dark 関数を使用して背景色が暗いかどうかを判断し、それに応じて文字色を変更しています。

例4: 条件式とループの組み合わせ

条件式をループと組み合わせることで、より動的なスタイルを作成することもできます。

$themes: (light, dark, neon);

@each $theme in $themes {
  .box-#{$theme} {
    @if $theme == light {
      background-color: #fff;
      color: #000;
    } @else if $theme == dark {
      background-color: #333;
      color: #fff;
    } @else {
      background-color: #f0f;
      color: #000;
    }
  }
}

このコードでは、$themes 配列の各テーマに対して条件式を使い、それぞれ異なるスタイルを適用しています。

SCSSの条件式を使うことで、スタイルの適用を動的に制御できるため、より柔軟で効率的なスタイリングが可能になります。
条件式を適切に活用することで、複雑なスタイルのロジックをシンプルに保つことができます。