selector.parse($selector) returns $selector in the Sass selector value format: a comma-separated list (selector list) of space-separated lists (complex selectors) of unquoted strings (compound selectors). Load with @use "sass:selector".
parse(".main aside:hover, .sidebar p") becomes two complex selectors: .main aside:hover and .sidebar p.
Most selector helpers already accept strings. Use parse when you need to walk structure with list.length / list.nth, loop complexes, or normalize input.
Interpolating a parsed selector usually prints a normal selector. The nested list is for Sass code—see also meta.inspect().
@use "sass:selector";
selector.parse($selector) //=> selector (list)
$parsed: selector.parse(".main aside:hover, .sidebar p");
// two complex selectors:
// (.main aside:hover)
// (.sidebar p)
// Feed into other helpers:
selector.nest($parsed, "&:hover");
selector.append(selector.parse(".btn"), ".primary");
// Global alias (legacy): selector-parse($selector)
// Prefer selector.parse after @use "sass:selector"Pattern: pass a selector string → get a nested list → inspect with sass:list or pass to other selector helpers.
Three nested levels, matching the module docs:
| Level | Meaning | Example piece |
|---|---|---|
| Outer list (comma) | Selector list | .main aside:hover, .sidebar p |
| Inner list (space) | Complex selector | .main aside:hover |
| Unquoted string | Compound selector | .main, aside:hover |
Returned selectors are always this nested list form—even when you started from a plain string.
Examples use @use "sass:selector". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Parse a selector list and inspect type + printed form.
@use "sass:meta";
@use "sass:selector";
$parsed: selector.parse(".main aside:hover, .sidebar p");
.probe {
--inspect: #{meta.inspect($parsed)};
--type: #{meta.type-of($parsed)};
}list.Use sass:list to measure both levels of the official sample.
@use "sass:list";
@use "sass:meta";
@use "sass:selector";
$parsed: selector.parse(".main aside:hover, .sidebar p");
$first: list.nth($parsed, 1);
.probe {
--complex-count: #{list.length($parsed)};
--compounds-in-first: #{list.length($first)};
--compound-1: #{meta.inspect(list.nth($first, 1))};
--compound-2: #{meta.inspect(list.nth($first, 2))};
}Parse a descendant selector, then nest a parent pseudo onto it.
@use "sass:selector";
$parsed: selector.parse(".card .title");
#{selector.nest($parsed, "&:hover")} {
color: teal;
}Many helpers accept either—parse when you need the list form.
@use "sass:selector";
.compare {
--from-string: #{selector.append(".btn", ".primary")};
--from-parsed: #{selector.append(selector.parse(".btn"), ".primary")};
}Parse a list, then @each over the complex selectors.
@use "sass:meta";
@use "sass:selector";
@mixin dump-complex($selector) {
$parsed: selector.parse($selector);
@each $complex in $parsed {
.dump {
content: meta.inspect($complex);
}
}
}
@include dump-complex(".hero h1, .hero p");.hero h1..hero p.Most parse confusion is mistaking the nested list for CSS syntax.
The structure is for Sass. CSS output looks like a normal selector again.
Parse when you need structure—not for every append/nest call.
list.length and list.nth open the complex and compound levels.
Split a compound with simple-selectors.
Prefer the module form with current Dart Sass.
| API | Status |
|---|---|
selector.parse() | Dart Sass 1.23+ via @use "sass:selector" |
| Return type | Selector (nested list) |
| Input | Selector string (or compatible value) |
| Legacy global | selector-parse($selector) |
Compile with the Dart Sass CLI.
One line: to turn a selector string into Sass’s nested list format, use selector.parse($selector).
Practical checklist:
1. @use "sass:selector"
2. Pass a selector string to parse
3. Use list.length / list.nth to walk levels
4. Feed the result into nest, append, etc.
5. Remember CSS output looks like a normal selectorReplace a selector piece with another using @extend-style unification.
8 people found this page helpful