Sass color.is-missing() Function

What You’ll Learn

color.is-missing() belongs to the built-in sass:color module. It answers: is this named channel missing on the color? This page covers quoted channel names, CSS none, powerless channels after space conversion, how it pairs with color.channel(), the Dart Sass 1.79+ requirement, and five examples.

What Is color.is-missing()?

Missing means “this dial is not present,” not “this dial reads zero.” Official docs: is-missing returns whether $channel is missing in $color. That matters for modern CSS colors that can use none, and for conversions that leave a channel powerless.

• color.is-missing(#b37399, "green") → false
• color.is-missing(rgb(100 none 200), "green") → true
• color.is-missing(color.to-space(grey, lch), "hue") → true

📝 Syntax

Load the color module, then pass a color and a quoted channel name:

@use "sass:color";

// Dart Sass 1.79+
color.is-missing($color, $channel)

Parameters

Return value

📦 Loading sass:color

There is no separate global is-missing() built-in. Use the module form on Dart Sass 1.79+.

// Recommended — namespaced (Dart Sass 1.79+)
@use "sass:color";
$miss: color.is-missing(rgb(100 none 200), "green");

// Optional — bring members into the current namespace
@use "sass:color" as *;
$miss: is-missing(rgb(100 none 200), "green");

// Optional — custom namespace
@use "sass:color" as c;
$miss: c.is-missing(rgb(100 none 200), "green");

🎨 When Is a Channel Missing?

Beginners usually meet missing channels in two situations:

📋 is-missing vs color.channel()

Official channel() docs say missing channels return 0 (possibly with a unit), and point you to is-missing for an explicit check.

@use "sass:color";

$c: rgb(100 none 200);

// true — green is absent
$missing: color.is-missing($c, "green");

// 0 — do not assume green was intentionally zero
$value: color.channel($c, "green");

🛠 Compatibility

This is about Sass compilers, not browsers. The boolean is resolved at compile time—CSS never sees a color.is-missing() call.

Examples Gallery

Examples target Dart Sass 1.79+. Open View Compiled CSS to see the booleans Sass emits.

@use "sass:color";

@debug color.is-missing(#b37399, "green"); // false

.flags {
  --green-missing: #{color.is-missing(#b37399, "green")};
  --red-missing: #{color.is-missing(#b37399, "red")};
  --blue-missing: #{color.is-missing(#b37399, "blue")};
}

.flags {
  --green-missing: false;
  --red-missing: false;
  --blue-missing: false;
}

@use "sass:color";

@debug color.is-missing(rgb(100 none 200), "green"); // true

.partial {
  --green: #{color.is-missing(rgb(100 none 200), "green")};
  --red: #{color.is-missing(rgb(100 none 200), "red")};
  --blue: #{color.is-missing(rgb(100 none 200), "blue")};
}

.partial {
  --green: true;
  --red: false;
  --blue: false;
}

@use "sass:color";

$grey-lch: color.to-space(grey, lch);

@debug color.is-missing($grey-lch, "hue"); // true

.neutral {
  --hue-missing: #{color.is-missing($grey-lch, "hue")};
}

.neutral {
  --hue-missing: true;
}

@use "sass:color";

@mixin hue-label($c) {
  &::after {
    content: if(
      color.is-missing($c, "hue"),
      "no-hue",
      "has-hue"
    );
  }
}

.chip-grey {
  @include hue-label(color.to-space(grey, lch));
}

.chip-pink {
  @include hue-label(color.to-space(#b37399, lch));
}

.chip-grey::after {
  content: "no-hue";
}

.chip-pink::after {
  content: "has-hue";
}

@use "sass:color";

$c: rgb(100 none 200);

.report {
  --missing: #{color.is-missing($c, "green")};
  --channel: #{color.channel($c, "green")};
}

.report {
  --missing: true;
  --channel: 0;
}

🚀 Real-World Use Cases

• Modern CSS color parsing — handle none safely in design tokens.
• Space-conversion helpers — detect powerless hue/chroma after to-space.
• Mixin guards — skip hue rotates when hue is missing.
• Debugging palettes — log which channels are absent vs zero.
• color-mix workflows — missing channels can inherit from the other color when mixing.

⚠️ Common Pitfalls

• Old Dart Sass — color.is-missing needs 1.79+.
• Unquoted channel names — use "green", not bare green.
• Trusting channel() == 0 — zero can mean missing; check is-missing.
• Expecting a color back — this helper returns a boolean.
• Looking for a global alias — use color.is-missing() from the module.

💡 Best Practices