Sass Introspection

How it works

The sass:meta module can describe Sass values. This is useful at public function boundaries where an incorrect type would otherwise produce an obscure arithmetic error. A type check is only the first layer: a number might still have an unwanted unit or lie outside the allowed range. Keep validation tied to the actual helper contract rather than building a complicated general type system around a tiny stylesheet.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass introspection.scss introspection.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

introspection.scss

Download introspection.scss — save at the shown relative path.

@use "sass:meta";
$space: 12px;
.sample {
  --kind: #{meta.type-of($space)};
  --shown: #{meta.inspect($space)};
}

Expected CSS

.sample {
  --kind: number;
  --shown: 12px;
}

The value is a Sass number with a length unit. inspect gives a debugging representation, which is useful in diagnostic messages but is not promised as a stable data-serialization format. Prefer explicit token properties when another program needs to consume generated data.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.