Sass meta.inspect() Function

What You’ll Learn

meta.inspect() belongs to the built-in sass:meta module. It turns any Sass value into an unquoted string so you can see what the compiler is holding. This page covers lists, maps, null, strings, why the format is for debugging only, and five compiled examples.

What Is meta.inspect()?

Official docs: returns a string representation of $value. It works for any Sass value—not only things that can appear in CSS. That makes it perfect for @debug and temporary inspection, and a poor choice for permanent production CSS.

📝 Syntax

@use "sass:meta";

// Recommended
meta.inspect($value)

// Legacy global name
inspect($value)

Parameters

Return value

📦 Loading sass:meta

// Recommended — namespaced
@use "sass:meta";
@debug meta.inspect((a: 1, b: 2));

// Optional — bring members into scope
@use "sass:meta" as *;
@debug inspect(null);

// Legacy global
@debug inspect("Helvetica");

🔎 @debug vs Emitting CSS

Official samples use @debug meta.inspect(…), which prints to the compiler console and does not appear in CSS. For tutorials and DevTools peeks, you can also interpolate into a custom property temporarily:

@use "sass:meta";

// Console only (best for day-to-day debugging)
@debug meta.inspect(("width": 200px));

// Temporary CSS token (remove before shipping)
:root {
  --peek: #{meta.inspect(("width": 200px))};
}

🛠 Compatibility

This is about Sass compilers, not browsers. Inspection happens at compile time.

Prefer current Dart Sass, and treat the string format as a debug convenience.

Examples Gallery

Examples interpolate meta.inspect into custom properties so you can open View Compiled CSS. In real projects, prefer @debug and remove these tokens before shipping.

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

🚀 Real-World Use Cases

• @debug while coding — print maps/lists that do not fit in CSS.
• Teaching Sass types — show beginners what a value “looks like” to the compiler.
• Temporary DevTools peeks — custom properties during local development only.
• Library diagnostics — help consumers understand unexpected config shapes.
• Not for design tokens in production — prefer real CSS values and maps APIs.

⚠️ Common Pitfalls

• Treating output as stable API — format can change between Sass versions.
• Assuming valid CSS — maps and null strings are not design tokens.
• Leaving peeks in production — strip debug custom properties before release.
• Using inspect instead of map/list APIs — read values with map.get, not string parsing.
• Expecting runtime inspection — browsers never evaluate meta.inspect.

💡 Best Practices