Sass map.values() Function

What You’ll Learn

map.values() belongs to the built-in sass:map module. It returns a comma-separated list of every value in a map. This page covers order, nested map values, vs map.keys, the legacy map-values name, looping patterns, and five compiled examples.

What Is map.values()?

Maps store named pairs like "medium": 500. Sometimes you only need the data—the numbers, colors, or lengths—not the names. Official docs: map.values returns a comma-separated list of all values in $map.

• Order matches the map’s key order
• Only top-level values of the map you pass (nested maps appear as whole items)
• Result is a list—use list.length, list.nth, or @each

📝 Syntax

Load the map module, then call the function:

@use "sass:map";

map.values($map)

// Legacy global name (still works)
map-values($map)

Parameters

Return value

📦 Loading sass:map

Modern Sass groups map helpers into a module. Load it with @use, then call map.values. The older global name map-values still works.

// Recommended — namespaced
@use "sass:map";
$nums: map.values($theme);

// Optional — bring members into scope
@use "sass:map" as *;
$nums: values($theme);

// Optional — custom namespace
@use "sass:map" as m;
$nums: m.values($theme);

// Legacy global
$nums: map-values($theme);

🔢 Order & Nested Values

Two rules beginners should remember:

• Order — values follow the same order as keys in the map
• Nesting — if a value is itself a map, that whole map is one list item (no automatic flatten)

@use "sass:map";

$flat: ("regular": 400, "medium": 500, "bold": 700);
map.values($flat);
// 400, 500, 700

$nested: ("weights": ("regular": 400), "family": "Helvetica");
map.values($nested);
// ("regular": 400), "Helvetica"  — first item is still a map

📋 map.values vs map.keys

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS only contains the finished values you emit from the list (for example colors or lengths).

Prefer Dart Sass for new work and the module API.

Examples Gallery

Each example uses @use "sass:map". Open View Compiled CSS to see what Dart Sass emits.

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

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.values($font-weights); // 400, 500, 700

.weights {
  --values: #{meta.inspect(map.values($font-weights))};
}

.weights {
  --values: 400, 500, 700;
}

@use "sass:map";
@use "sass:list";

$space: (
  "sm": 0.5rem,
  "md": 1rem,
  "lg": 1.5rem
);

@each $size in map.values($space) {
  $i: list.index(map.values($space), $size);
  .pad-#{$i} {
    padding: $size;
  }
}

.pad-1 { padding: 0.5rem; }
.pad-2 { padding: 1rem; }
.pad-3 { padding: 1.5rem; }

@use "sass:map";
@use "sass:list";

$palette: (
  "primary": #1d4ed8,
  "accent": #e67e22,
  "muted": #94a3b8
);
$colors: map.values($palette);

:root {
  --c1: #{list.nth($colors, 1)};
  --c2: #{list.nth($colors, 2)};
  --c3: #{list.nth($colors, 3)};
}

:root {
  --c1: #1d4ed8;
  --c2: #e67e22;
  --c3: #94a3b8;
}

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

$theme: (
  "colors": (
    "primary": #1d4ed8,
    "accent": #e67e22
  ),
  "radius": 8px
);

$color-values: map.values(map.get($theme, "colors"));

.demo {
  --nested-values: #{meta.inspect($color-values)};
  --top-values: #{meta.inspect(map.values($theme))};
}

.demo {
  --nested-values: #1d4ed8, #e67e22;
  --top-values: ("primary": #1d4ed8, "accent": #e67e22), 8px;
}

@use "sass:map";
@use "sass:list";

$tokens: (
  "primary": #1d4ed8,
  "radius": 8px,
  "gap": 16px
);

.count {
  --entries: #{list.length(map.values($tokens))};
}

.count {
  --entries: 3;
}

🚀 Real-World Use Cases

• Token dumps — emit every spacing or color value without building class names from keys.
• Indexed utilities — generate .pad-1, .pad-2 style classes from value order.
• List math — pass map values into list helpers when only magnitudes matter.
• Nested branch export — map.values(map.get(...)) for one config subtree.
• Quick counts — measure how many top-level tokens a map holds.

⚠️ Common Pitfalls

• Expecting deep flatten — nested maps stay as map items in the list until you dig in with map.get.
• Losing key names — values alone cannot rebuild which token was which; keep keys when names matter.
• Order assumptions — order matches the map, but maps built from merges may append new keys at the end.
• Forgetting @use — map.values needs sass:map (or use legacy map-values).
• Using values when you need pairs — prefer @each $key, $value in $map for named output.

💡 Best Practices