Sass meta.module-variables()

Intermediate
8 min read
Updated: Nov 2026
5 examples
Dart Sass 1.23+
Sass meta.module-variables listing variables from a loaded module as a map
Definition

Definition and Usage

meta.module-variables($module) returns a map of every variable defined in $module—keys are names without $, values are the variable values. Dart Sass 1.23+. Load with @use "sass:meta".

Official sample idea.

After @use "variables" with $hopbush, $midnight-blue, and $wafer, meta.module-variables("variables") returns ("hopbush": #c69, …).

$module matches a namespace.

Pass a string matching a @use namespace in the current file (e.g. "variables"), or a module value.

Keys omit $.

Look up "hopbush", not "$hopbush", with map.get / map.has-key.

Syntax

Syntax

SCSS
@use "sass:map";
@use "sass:meta";
@use "variables";

meta.module-variables($module); //=> map

// Official tokens (keys without $)
$map: meta.module-variables("variables");
// ("hopbush": #c69, "midnight-blue": #036, "wafer": #e1d7d2)

color: map.get($map, "hopbush");

// Module API — Dart Sass 1.23+

Pattern: @use the module → module-variables for the catalog → map.get / map.has-key / @each.

Reference

Map Shape and Reading

What you get back and how to use it:

PieceMeaningTypical next step
Map keysVariable names without $map.keys / map.has-key
Map valuesThe actual Sass valuesmap.get($map, "name") into CSS
$module stringMust match this file’s @use namespace"variables", "theme", …
vs global-variable-existsOne name yes/noUse exists for a single check
vs module-functions / module-mixinsSame catalog ideaValues here are ready to use (no call/apply)
Sibling catalogs.

meta.module-functions and meta.module-mixins list functions and mixins the same way.

Code

SCSS Examples

Examples target Dart Sass 1.23+ with @use "sass:meta". Open View Compiled CSS for verified output (matches official Sass docs samples where shown).

Example 1 — Inspect the Official Variables Map

Peek at the full map with meta.inspect (official hopbush / midnight-blue / wafer tokens).

SCSS
$hopbush: #c69;
$midnight-blue: #036;
$wafer: #e1d7d2;
SCSS
@use "sass:meta";
@use "variables";

.probe {
  --vars: #{meta.inspect(meta.module-variables("variables"))};
}

How It Works

  1. @use "variables" loads the tokens.
  2. module-variables builds the map.
  3. Keys omit the $.
  4. Matches the official Sass docs sample shape.

Example 2 — Use Tokens with map.get

Read individual colors from the catalog into real CSS properties.

SCSS
@use "sass:map";
@use "sass:meta";
@use "variables";

$vars: meta.module-variables("variables");

.swatch {
  color: map.get($vars, "hopbush");
  background: map.get($vars, "wafer");
  border-color: map.get($vars, "midnight-blue");
}

How It Works

  1. Store the map once in $vars.
  2. map.get pulls each token by string key.
  3. No $ in the key names.
  4. Values drop straight into CSS properties.

Example 3 — Count and Probe Keys

Combine map.keys, list.length, and map.has-key.

SCSS
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@use "variables";

$vars: meta.module-variables("variables");

.probe {
  --keys: #{meta.inspect(map.keys($vars))};
  --n: #{list.length(map.keys($vars))};
  --has-hopbush: #{map.has-key($vars, "hopbush")};
  --has-nope: #{map.has-key($vars, "nope")};
}

How It Works

  1. Three tokens produce a count of 3.
  2. map.keys lists the bare names.
  3. has-key finds hopbush.
  4. Unknown names return false.

Example 4 — Theme Spacing Module

Same API for non-color tokens—radius, padding, and ink color.

SCSS
$radius: 8px;
$pad: 1rem;
$ink: #123;
SCSS
@use "sass:map";
@use "sass:meta";
@use "theme";

$theme: meta.module-variables("theme");

.card {
  padding: map.get($theme, "pad");
  border-radius: map.get($theme, "radius");
  color: map.get($theme, "ink");
}

How It Works

  1. Any module variables work—not just colors.
  2. Namespace is "theme" from @use.
  3. map.get fills spacing and color.
  4. Handy for design-token / theme packs.

Example 5 — Guard Before map.get

Check map.has-key so optional token names fail safely.

SCSS
@use "sass:map";
@use "sass:meta";
@use "theme";

$theme: meta.module-variables("theme");
$name: "radius";

.box {
  @if map.has-key($theme, $name) {
    border-radius: map.get($theme, $name);
  } @else {
    border-radius: 0;
  }
  padding: 1rem;
}

How It Works

  1. $name is looked up in the catalog.
  2. True path applies the theme radius.
  3. Missing names take the @else fallback.
  4. Safer for optional plugin tokens.

Edge Cases & Pitfalls

Most module-variables bugs are including $ in keys or mismatching the namespace.

keys

No dollar sign in keys

Pass "hopbush", not "$hopbush", to map.get.

namespace

String must match @use

After @use "variables" as tokens, pass "tokens", not "variables".

guard

Check before optional reads

Use map.has-key (or global-variable-exists) before assuming a token exists.

dart

Dart Sass 1.23+ only

Official docs: LibSass / Ruby Sass do not provide this API.

Toolchain

Sass Support

Prefer the module form with Dart Sass 1.23+.

APIStatus
meta.module-variables()Dart Sass 1.23+ via @use "sass:meta"
Return typeMap (bare name → value)
$moduleNamespace string or module value
LibSass / Ruby SassNot available

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Returns a map of every variable in a loaded module.
  • Keys omit $; values are ready for CSS via map.get.
  • $module matches @use namespace in the current file.
  • Dart Sass 1.23+ — great for design-token catalogs.

One line: to list every variable in a @use module, use meta.module-variables($module).

Practice

Compile Notes

Practical checklist:

checklist.txt
1. @use "sass:meta" (+ "sass:map")
2. @use "your-module"
3. $vars: meta.module-variables("your-module")
4. map.get / map.has-key / map.keys (bare names)
5. Optional: @each $name, $value in $vars { … }

Frequently Asked Questions

meta.module-variables($module) returns a map of every variable defined in that @use module—keys are names without $, values are the variable values.
A string matching the namespace of a @use rule in the current file—for example "variables" after @use "variables". It can also be a module value.
No. Official docs: keys are variable names without $. So $hopbush becomes the key hopbush.
global-variable-exists answers yes/no for one global name. module-variables returns the whole catalog of variables in a module as a map.
Use map.get—for example map.get(meta.module-variables("variables"), "hopbush") returns #c69.
Dart Sass 1.23+. LibSass and Ruby Sass do not. Prefer current Dart Sass.

Next: Sass meta.type-of()

Get the type name of any Sass value.

meta.type-of() →

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 meta.module-mixins Function Sass meta.type-of Function