【Sass】@ifで条件分岐する方法

CSSを効率的に管理するためのプリプロセッサであるSassは、多くの便利な機能を提供しています。その中でも特に強力なのが、条件分岐を可能にする@ifディレクティブです。本記事では、@ifディレクティブを使ってスタイルを条件分岐させる方法を具体例と共に詳しく解説します。

Sassの@ifとは？

@ifは、Sassにおける条件分岐を行うためのディレクティブです。指定した条件が真である場合にのみ、その後のコードを実行します。これにより、柔軟で再利用可能なスタイルを簡単に作成することができます。

基本的な@ifの使い方

まずは、@ifディレクティブの基本的な使い方を見てみましょう。

$color: blue;

@mixin theme-colors($theme) {
  @if $theme == light {
    color: white;
    background-color: $color;
  } @else if $theme == dark {
    color: black;
    background-color: $color;
  } @else {
    color: gray;
    background-color: $color;
  }
}

body {
  @include theme-colors(light);
}

この例では、$themeという引数を取るtheme-colors mixinを定義し、$themeの値に応じて異なるスタイルを適用しています。

実際の利用例 ボタンスタイルの条件分岐

次に、実際の利用例としてボタンのスタイルを条件分岐させる方法を紹介します。

$primary-color: red;
$secondary-color: blue;

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

.button-primary {
  @include button-styles(primary);
}

.button-secondary {
  @include button-styles(secondary);
}

.button-default {
  @include button-styles(default);
}

この例では、button-stylesというmixinを定義し、ボタンの種類（primary、secondary、default）に応じて異なるスタイルを適用しています。これにより、各ボタンに応じた適切なスタイルが簡単に設定できます。

まとめ

Sassの@ifディレクティブを使用することで、スタイルシートに条件分岐を導入し、より柔軟で再利用可能なCSSを作成することができます。本記事で紹介した基本的な使い方と実際の利用例を参考に、ぜひ自分のプロジェクトでも@ifディレクティブを活用してみてください。