Sass: if()

The built-in if() function returns one of two results depending on a condition. It is Sass's inline conditional (the expression-level equivalent of an @if rule) letting you pick between two values without writing a multi-line block.

Syntax

if($condition, $if-true, $if-false)

You can think of it as: "if the condition holds, use this value; otherwise, use that one."

Basic Example

The .scss file:

h2 {
  color: if(1 + 1 == 2, green, red);
}

Because 1 + 1 == 2 evaluates to true (truthy), if() returns green:

h2 {
  color: green;
}

A few more quick examples from the official Sass documentation:

@debug if(true, 10px, 15px);   // 10px
@debug if(false, 10px, 15px);  // 15px

Truthiness and Falsiness

if() doesn't require $condition to be literally true or false. Like all Sass conditions, it uses truthiness:

@debug if(0, "truthy", "falsy");     // truthy  (0 is truthy in Sass!)
@debug if("", "truthy", "falsy");    // truthy  (empty string is truthy)
@debug if((), "truthy", "falsy");    // truthy  (empty list is truthy)
@debug if(null, "truthy", "falsy");  // falsy   (null is falsy)
@debug if(false, "truthy", "falsy"); // falsy   (false is falsy)

This differs from JavaScript, where 0, "", and [] are falsy. In Sass, only false and null are falsy.

Lazy Evaluation

if() is special: it only evaluates the argument it returns. The other argument is not evaluated at all, so it is safe to reference variables that may not be defined, or to call expressions that would otherwise error.

@use "sass:meta";

// $var is not defined, but this is safe:
// $var is never evaluated because the condition is false.
@debug if(meta.variable-defined($var), $var, null); // null

If $var is not defined, meta.variable-defined($var) returns false, so if() returns null and never touches $var, which would have thrown an error if evaluated. This lazy behavior is what makes if() safe for guarding undefined variables.

Practical Examples

Picking a value from a flag

$dark-theme: true;

body {
  background: if($dark-theme, #1a1a1a, #ffffff);
  color: if($dark-theme, #e0e0e0, #1a1a1a);
}

Compiles to:

body {
  background: #1a1a1a;
  color: #e0e0e0;
}

Inside a mixin

@mixin badge($active: true) {
  background: if($active, #2e7d32, #9e9e9e);
  color: if($active, #fff, #555);
}

.badge-new    { @include badge($active: true); }
.badge-stale  { @include badge($active: false); }

Compiles to:

.badge-new { background: #2e7d32; color: #fff; }
.badge-stale { background: #9e9e9e; color: #555; }

Guarding a possibly-undefined variable

// Returns the variable if it exists, otherwise null (which emits nothing)
$rounded: if(variable-defined($radius), $radius, null);

if() vs @if

if() and @if both test conditions, but they are used in different places:

Use if() when you need to pick a value; use @if when you need to conditionally emit styles.

// if(): choosing a value
.button {
  background: if($primary, blue, gray);
}

// @if: choosing a block of rules
@mixin theme($dark) {
  @if $dark {
    background: #000;
    color: #fff;
  } @else {
    background: #fff;
    color: #000;
  }
}

⚠️ Deprecation Notice

The new plain-CSS if() syntax

The modern equivalent wraps Sass conditions in sass(...) and uses : to separate conditions from values, with else: for the fallback:

@use 'sass:meta';

// Instead of: if(true, 10px, 15px)
@debug if(sass(true): 10px; else: 15px);  // 10px

// Instead of: if(meta.variable-defined($var), $var, null)
@debug if(sass(meta.variable-defined($var)): $var);  // null (when $var is undefined)

This new syntax allows Sass conditions and CSS conditions to be mixed freely, and only the matching branch is evaluated, preserving the lazy-evaluation behavior of the legacy function.

You can automatically migrate existing code using the Sass migrator:

sass-migrator if-expression **/*.scss

Summary

The if() function is a handy inline conditional for choosing between two values. For new projects, use the modern plain-CSS if() syntax; for existing codebases, the legacy form still works until Dart Sass 3.0.0 and can be auto-migrated.