Lists hold a sequence of values. Separators can be spaces (10px 15px 0 0), commas (Helvetica, Arial, sans-serif), or slashes (via list.slash()). Brackets are optional.
1 is the first item; -1 is the last. That differs from many languages that start at 0.
list.append() returns a new list. Reassign the variable if you need to accumulate values.
() is not valid CSS.Sass will not let you put an empty unbracketed list in a property value. Use [] when you need an empty bracketed list for CSS.
@use "sass:list";
$space: 10px 12px 16px; // space-separated
$comma: 40px, 50px, 80px; // comma-separated
$grid: [line1 line2]; // bracketed (handy for Grid)
list.nth($space, 2); // 12px
list.append($space, 25px); // 10px 12px 16px 25px
list.index(1px solid red, solid); // 2
@each $size in $comma { ... }Pattern: store a list → read with list.nth / find with list.index → grow with list.append → loop with @each.
Everyday list tools:
| Pattern | Result idea |
|---|---|
a b c / a, b, c | Space- or comma-separated list |
[a b] | Bracketed list (CSS Grid lines, etc.) |
list.nth($list, $n) | Element at index (1 or -1) |
list.append($list, $val) | New list with value at the end |
list.index($list, $val) | Index, or null if missing |
@each $item in $list | Emit styles for every element |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
@each Over a ListGenerate a rule for every size in a comma-separated list.
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}$size.list.nthRead by index—2 from the start, -1 from the end.
@use "sass:list";
.demo {
--second: #{list.nth(10px 12px 16px, 2)};
--last: #{list.nth([line1, line2, line3], -1)};
}list.nth sample.list.appendReturn a new list with a value added at the end.
@use "sass:list";
.demo {
--space: #{list.append(10px 12px 16px, 25px)};
--bracket: #{list.append([col1-line1], col1-line2)};
}list.index Validationnull is falsey—reject invalid values with @if not list.index(...).
@use "sass:list";
$valid-sides: top, bottom, left, right;
@mixin attach($side) {
@if not list.index($valid-sides, $side) {
@error "#{$side} is not a valid side.";
}
border-#{$side}: 2px solid;
}
.box {
@include attach(top);
}top at index 1.null (falsey).$args... is a special list; keywords become a map via meta.keywords.
@use "sass:meta";
@mixin syntax-colors($args...) {
@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}
@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
);Most list bugs are 0-based thinking or mutating expectations.
list.nth($list, 0) is invalid. Use 1 or -1.
Write $list: list.append($list, $val); to keep the new value.
You cannot write slash-separated lists literally yet. See list.slash().
Use bracketed [] when an empty list must appear in CSS.
Lists and sass:list are core Sass on Dart Sass.
| Feature | Status |
|---|---|
| Space / comma lists | Supported |
Bracketed lists [] | Supported (LibSass/Ruby 3.5+) |
| Slash-separated lists | Via list.slash() |
@each / argument lists | Supported |
Compile with the Dart Sass CLI.
-1 is the last item.append.One line: store related values in a list, then loop or look them up with sass:list helpers.
Practical checklist:
1. Pick space or comma separators (keep them consistent)
2. Remember indexes start at 1 (-1 = last)
3. Use @each to generate repeated CSS
4. Use list.nth / list.index / list.append from sass:list
5. Reassign after append—lists are immutableStore key/value pairs—often alongside lists for config and themes.
8 people found this page helpful