list.separator($list) returns the name of the separator used by $list as an unquoted string: space, comma, or slash. Load it with @use "sass:list" on Dart Sass 1.23+.
Official docs: if $list has no separator, the result is space (singles and empty lists). Legacy global name: list-separator() — not bare separator().
list.separator(1px 2px 3px) → space. list.separator((1px, 2px, 3px)) → comma. list.separator('Helvetica') → space. list.separator(()) → space.
Use list.is-bracketed() for […]. Separator and brackets are independent flags.
@use "sass:list";
list.separator(1px 2px 3px); // space
list.separator((1px, 2px, 3px)); // comma
list.separator('Helvetica'); // space
list.separator(()); // space
list.separator(list.slash(1px, 50px, 100px)); // slash
// Legacy global name
list-separator(1px 2px 3px);Pattern: inspect with separator → force a shape with list.join(..., $separator: …) or list.slash().
What you can get back:
| Result | Typical input |
|---|---|
space | 1px 2px 3px, singles, empty lists |
comma | (a, b, c), [a, b, c] |
slash | list.slash(1px, 50px, 100px) |
| Compare with | == space / == comma / == slash (unquoted) |
separator().The global built-in is list-separator(). Prefer the module form list.separator() in new SCSS.
Examples target Dart Sass 1.23+ with @use "sass:list". Open View Compiled CSS for verified output (matches official Sass docs samples).
A normal spacing list reports space.
@use "sass:list";
@debug list.separator(1px 2px 3px); // space
.space {
--sep: #{list.separator(1px 2px 3px)};
}space.Parentheses with commas report comma.
@use "sass:list";
@debug list.separator((1px, 2px, 3px)); // comma
.comma {
--sep: #{list.separator((1px, 2px, 3px))};
}comma.[1px, 2px] also report comma.space (Official Docs)No real separator → Sass still reports space.
@use "sass:list";
@debug list.separator('Helvetica'); // space
@debug list.separator(()); // space
.singles {
--string: #{list.separator('Helvetica')};
--empty: #{list.separator(())};
}() also has no separator.space by official rule.length too.list.slashSlash lists are built with a helper, then detected here.
@use "sass:list";
@debug list.separator(list.slash(1px, 50px, 100px)); // slash
.slash {
--sep: #{list.separator(list.slash(1px, 50px, 100px))};
--forced: #{list.separator(list.join(10px, 20px, $separator: comma))};
}list.slash builds a slash-separated list.separator reports slash.join(..., $separator: comma) forces comma.Only treat a token as spacing or colors when the separator matches.
@use "sass:list";
$spacing: 8px 16px 24px;
$colors: (blue, red, green);
.guard {
@if list.separator($spacing) == space {
--spacing-ok: true;
} @else {
--spacing-ok: false;
}
@if list.separator($colors) == comma {
--colors-ok: true;
} @else {
--colors-ok: false;
}
}== space / == comma.Most separator bugs are assuming space means multiple items, confusing brackets with separators, or calling separator() as a global.
Singles and () still return space. Pair with list.length.
[a, b] can be comma + bracketed. Check both helpers when shape matters.
There is no standalone global separator() for lists.
Literal / is still awkward in Sass — build slash lists with the helper.
Prefer the module form with Dart Sass 1.23+. Legacy global: list-separator().
| API | Status |
|---|---|
list.separator() | Dart Sass 1.23+ via @use "sass:list" |
Global list-separator() | Legacy alias (prefer module form) |
| Return type | Unquoted string: space / comma / slash |
| LibSass / Ruby Sass | No sass:list module — use list-separator() if needed |
Compile with the Dart Sass CLI.
$separator or list.slash.@use "sass:list".One line: when you need to know how a list is separated, call list.separator($list).
Practical checklist:
1. @use "sass:list"
2. Compare with == space / == comma / == slash
3. Remember singles/empty default to space
4. Use list.slash() when you need a slash list
5. Check is-bracketed separately from separatorRead the value at a 1-based (or negative) index.
8 people found this page helpful