SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。

Sassとは？SCSSとSASSの違いや基礎知識と導入方法【2025年版】

Sassの@ifは、条件によって出力するスタイルを切り替えるためのディレクティブです。
JavaScriptやPHPのif文のように、「もし○○ならこのスタイルを出力、そうでなければ別のスタイルにする」といったロジックをSass内で実行することができます。

通常のCSSでは条件によってスタイルの出し分けを行うことはできません。
しかしSassでは、@ifを使うことで、柔軟かつスマートなスタイル設計が可能になります。

Sassで条件分岐が必要な理由

これまでのCSSは、基本的にすべてのスタイルを静的に書いていく言語でした。
「もしこの値だったらこうする」といった条件による出し分けは、JavaScriptなど他の言語に頼るしかありませんでした。

一方Sassでは、@ifを使うことで、スタイル生成時の条件分岐が可能になります。
特に、下記のようなシーンで非常に有用に活用できます。

1. 変数や引数の内容に応じてスタイルを切り替えたいとき
2. 繰り返しの中で処理に変更を行いたいとき
3. 値の型や内容に応じてエラーメッセージを表示したいとき

@if の基本構文と使い方

Sassの@ifは、「条件を満たしたときに特定のスタイルを出力する」ためのディレクティブです。
プログラミング言語の if文のように利用できます。
@else ifや@elseを活用して複雑な条件式にも対応できます。

scss記述例

$theme: dark; // 変数を定義

body {
  @if $theme == light { // もし$themeが'light'なら
    background-color: #fff;
  } @else if $theme == dark { // もし$themeが'light'ではなく'dark'なら
    background-color: #222;
  } @else { // これまでの条件に該当しなければ
    background-color: #ccc;
  }
}

• 　@if 条件式１ → 最初の条件に合致する場合
• 　@else if 条件式２ → 条件式１ではなく条件式２に合致する場合
• 　@else → 上記すべてに当てはまらなかった場合

条件式は必ず@ifから始まり、@else if・@elseの順に評価されます。
@else ifは条件式１とは違う条件式とペアである必要がありますが、@else if自体はいくつあってもOKです。
@elseは最後に評価される必要があります。

出力されるCSS

body {
  background-color: #222; // 定義された変数の値に従った結果が出力される
}

scss１行目で$theme = dark;と定義されているので、定義内容に応じた結果が出力されます。

よく使う演算子と条件式

@if・@else ifは条件式とセットで記述する必要があります。
条件式で利用できる演算子と実際の使用例は下記の通りです。

Sassは条件式内で数値・文字列・色・真偽値（true/false）・nullなどを扱えるので、柔軟な条件分岐が可能です。

条件式記述時の注意点

@ifはとても便利なディレクティブですが、条件式の評価方法はJavaScriptやPHPと違うクセがあるため、意図しない動作やエラーが起こることもあります。
ここでは、Sassの条件式を書く上で気をつけなければならないポイントを紹介します。

true | false を判定する方法

Sassの条件式で真偽（true/false）を判定したい時は下記のように記述します。

scss記述例

$flag: null;

@if $flag {
  // 実行されない（nullはfalse扱い）
}

値ごとの真偽結果一覧表

$flgに代入する値によって判定結果は異なります。

つまり、Sassで偽（false）と判断されるのはfalseかnullの場合のみです。
数値の0・""（空文字）・"false"（文字列）は真（true）と判断されるので気をつけましょう。

演算子を使った判定では値の型も評価される

@if・@else ifの条件式で比較を行う場合は、演算子（==・!=）では値の型も評価の対象となります。
値の見た目が同じでも、型が異なる（例：数値と文字列）と==では一致しません。

scss記述例

$size1: 10; // 数値
$size2: "10"; // 文字列

@if $size1 == $size2 {
  // 実行されない（型が違う）
}

数字であっても、""（ダブルクォーテーション）で包むと値は文字列として評価されます。

値の型を判断する方法（type-of関数）

Sassでデータの型（タイプ）を取得する時は、type-of関数を利用します。

scss記述例

$number: 10;
$color: white;
$string: 'サンプル';
$boolean: false;
$list: 10, 20, 30, 40;
$null: null;

.type-check{
    content: quote(type-of($number));
    content: quote(type-of($color));
    content: quote(type-of($string));
    content: quote(type-of($boolean));
    content: quote(type-of($list));
    content: quote(type-of($null));
}

コンパイルされるCSS

.type-check {
    content: "number";
    content: "color";
    content: "string";
    content: "bool";
    content: "list";
    content: "null";
}

type-ofで取得できる型の一覧表

演算子での文字列比較は完全一致のみ（部分一致は不可）

@if・@else ifの条件式で文字列比較を行う場合は、演算子（==・!=）では完全一致しか評価しません。
部分一致を評価したい場合はstr-index()関数を利用しましょう。

str-index()関数についての詳細は他の記事で紹介します。

scss記述例（１）

$theme: "light-mode";
body{
  @if $theme == "light" {
    // $theme が 'light'と完全一致する場合
    background-color: #fff;
  } else {
    // $theme が 'light'と完全一致しない場合
    // ※今回は"light" は含まれているが完全一致ではないのでtrueではない
    background-color: #323232;
  }
}

演算子による文字列比較では、完全一致のみがtrueとなります。
部分一致ではfalseとなります。

scss記述例（２）

$theme: "light-mode";
body{
    @if str-index( $theme, "light" ) {
    // str-index($theme, "light")の結果がnull=falseでない場合
    // $theme に'light'が含まれる場合
        background-color: #fff;
    } @else {
        background-color: #323232;
    }
}

str-index()関数を利用することで、指定した文字列の座標を取得し、数値が返ればtrue＝部分一致、false＝部分一致しないとなります。

最後に

Sassの@ifは、CSSにはない条件分岐の仕組みを利用してより柔軟で再利用性の高いコーディングを実現できる非常に便利なディレクティブです。
@ifを活用することで、@mixin・関数・変数の応用範囲が広がり、コードの柔軟性と保守性が格段に向上します。
ぜひ@ifを活用し、Sassを使いこなしてスマートなコーディングを実現しましょう。