Sass color.is-missing()

Beginner
11 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass color.is-missing detecting missing CSS none color channels
Definition

Definition and Usage

color.is-missing() returns a boolean: true when a named channel is missing on $color (written as CSS none), otherwise false. Load it with @use "sass:color" on Dart Sass 1.79+. There is no separate global alias.

The $channel argument must be a quoted string such as "green", "hue", or "alpha". Missing channels often come from explicit none, or after a space conversion when a channel is not meaningful (for example grey converted to lch can lose hue).

Official samples.

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

Why not only color.channel()?

Official docs: color.channel() returns 0 (sometimes with a unit) for missing channels. Use is-missing when zero and missing must be distinguished.

Version gate.

Needs Dart Sass 1.79+. Older compilers report Undefined function.

Syntax

Syntax

SCSS
@use "sass:color";

// Dart Sass 1.79+
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

// Module only — no separate global is-missing()

Pattern: quote the channel name → branch with if() before hue/chroma logic that assumes a real value.

Reference

vs channel / is-powerless

Related inspectors for modern color work:

NeedUse
Is this channel none / missing?color.is-missing($c, "hue")
Read a channel number (missing → 0)color.channel($c, "hue")
Does this channel not affect rendering?color.is-powerless()
Convert space (may introduce missing)color.to-space()
Code

SCSS Examples

Examples target Dart Sass 1.79+. Booleans are interpolated into custom properties so you can open View Compiled CSS. @debug lines print to the compiler terminal / log.

Example 1 — Normal Hex Has No Missing Channels

A complete RGB hex reports false for green (official sample).

SCSS
@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")};
}

How It Works

  1. Everyday hex defines all RGB channels.
  2. Quoted names like "green" select the channel.
  3. All three flags compile to false.
  4. Missing is unusual until you use none or convert spaces.

Example 2 — CSS none Marks a Channel Missing

Official docs sample with green set to none.

SCSS
@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")};
}

How It Works

  1. none means no green component.
  2. Green is missing → true.
  3. Red and blue remain present → false.
  4. When mixing colors, missing channels can take the other color’s value.

Example 3 — Grey → LCH Can Lose Hue

Official docs: converting grey into lch leaves hue missing.

SCSS
@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")};
}

How It Works

  1. Pure grey has no chroma, so hue is not meaningful.
  2. to-space(..., lch) can mark hue as missing.
  3. Flag is true for "hue".
  4. Related: color.is-powerless() for channels that do not affect rendering.

Example 4 — Guard Before Reading Hue

Skip hue-based logic when the channel is missing.

SCSS
@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));
}

How It Works

  1. if() runs at compile time.
  2. Grey-in-LCH takes the missing branch.
  3. Chromatic pink keeps a real hue → has-hue.
  4. Real mixins might skip hue rotates instead of labels.

Example 5 — Pair is-missing with channel

Show why a zero from channel() is not enough.

SCSS
@use "sass:color";

$c: rgb(100 none 200);

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

How It Works

  1. Green is missing → true.
  2. channel() still reports 0.
  3. Without is-missing you might think green was set to zero on purpose.
  4. Check missing first, then read the number if needed.

Edge Cases & Pitfalls

Most is-missing bugs are unquoted channel names, treating channel() zeros as real values, or an old Dart Sass.

quotes

Channel names must be quoted

Use "green" / "hue". Unquoted names are not valid for $channel.

zero

Missing ≠ zero

color.channel() returns 0 for missing channels. Always check is-missing when that distinction matters.

version

Needs Dart Sass 1.79+

Undefined function means upgrade. LibSass / Ruby Sass do not provide this API.

space

Inspects the color’s own space

Ask for a channel that exists on that color. Convert with to-space first if you need another space’s channels.

Toolchain

Sass Support

This is about Sass compilers, not browsers. The boolean is resolved at compile time.

FeatureStatus
color.is-missing()Dart Sass 1.79+
Related color.channel() / color.is-powerless()Dart Sass 1.79+ color-spaces work
Global is-missing()None — module only
LibSass / Ruby SassNot supported

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Detects missing / none channels as a boolean.
  • Quote the channel — "green", "hue", "alpha".
  • Pair with channel() — missing still reads as 0 there.
  • Dart Sass 1.79+ module API only — no global alias.

One line: color.is-missing tells you when a channel is truly absent — not just zero.

Compile

Compile Notes

Conceptual flow:

flow.txt
1. @use "sass:color" (Dart Sass 1.79+)
2. Resolve $color and quoted $channel
3. Return true if that channel is missing (none)
4. Return false if the channel has a real value
5. CSS sees only the boolean or the branched result

Frequently Asked Questions

color.is-missing($color, $channel) returns true if that channel is missing on the color. Example: color.is-missing(rgb(100 none 200), "green") is true.
Pass a quoted string such as "green", "hue", or "alpha". Unquoted names are not correct for $channel.
color.is-missing() needs Dart Sass 1.79+. Older compilers report Undefined function.
color.channel() returns a number and uses 0 (sometimes with a unit) when a channel is missing. color.is-missing() returns a boolean so you can tell missing apart from a real zero.
Commonly from CSS none in a color function (rgb(100 none 200)), or when a channel is powerless after converting spaces—for example grey converted to lch can have a missing hue.
No. Use the module form color.is-missing() after @use "sass:color".

Next: Sass color.is-powerless()

Check whether a channel’s value does not affect how the color is rendered.

color.is-powerless() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass color.is-legacy Function Sass color.is-powerless Function