Sass meta.inspect()

Definition and Usage

meta.inspect($value) returns an unquoted string representation of any Sass value—not just values that can appear in CSS. Load it with @use "sass:meta".

Syntax

@use "sass:meta";

meta.inspect($value); //=> unquoted string

@debug meta.inspect(10px 20px 30px);       // 10px 20px 30px
@debug meta.inspect(("width": 200px));     // ("width": 200px)
@debug meta.inspect(null);                 // null
@debug meta.inspect("Helvetica");          // "Helvetica"

// Global alias (legacy): inspect($value)
// Prefer meta.inspect after @use "sass:meta"

Pattern: pass any value → get a readable string → print with @debug (or temporary CSS while learning) → remove before shipping.

What Inspect Shows

Common value shapes and typical inspect text:

Related Functions

Load with @use "sass:meta". Previous: meta.global-variable-exists(). Next: meta.keywords(). Also: meta.type-of(), meta.variable-exists(), meta.module-variables().

SCSS Examples

Examples use @use "sass:meta" and put inspect text into custom properties so you can open View Compiled CSS (matches official Sass docs samples where shown). Prefer @debug in day-to-day work.

@use "sass:meta";

// @debug meta.inspect(10px 20px 30px);
:root {
  --list: #{meta.inspect(10px 20px 30px)};
}

:root {
  --list: 10px 20px 30px;
}

@use "sass:meta";

// @debug meta.inspect(("width": 200px));
:root {
  --map: #{meta.inspect(("width": 200px))};
}

:root {
  --map: ("width": 200px);
}

@use "sass:meta";

// @debug meta.inspect(null);
:root {
  --null: #{meta.inspect(null)};
}

:root {
  --null: null;
}

@use "sass:meta";

// @debug meta.inspect("Helvetica");
:root {
  --font: #{meta.inspect("Helvetica")};
}

:root {
  --font: "Helvetica";
}

@use "sass:meta";

$tokens: (
  "gap": 1rem,
  "ok": true
);

:root {
  --number: #{meta.inspect(42)};
  --bool: #{meta.inspect(true)};
  --tokens: #{meta.inspect($tokens)};
}

:root {
  --number: 42;
  --bool: true;
  --tokens: ("gap": 1rem, "ok": true);
}

Sass Support

Prefer the module form with current Dart Sass.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. @use "sass:meta"
2. @debug meta.inspect($value)
3. Or temporary: --peek: #{meta.inspect($value)}
4. Do not ship inspect-dependent CSS
5. Prefer type-of when you only need the kind