Nesting means writing one style rule inside another. Sass combines the outer selector with the inner one—by default with a descendant combinator (a space)—so you avoid repeating parents.
nav { ul { ... } } compiles to nav ul { ... }.
Nesting is great for reading structure—nav → ul / li / a—without copying nav on every line.
Deep nesting generates long selectors that cost bandwidth and make overrides harder. Prefer about two or three levels.
// Default: descendant join (a space)
nav {
ul { margin: 0; } // => nav ul
a { display: block; } // => nav a
}
// Selector lists expand pairwise
.alert, .warning {
ul, p { ... } // => .alert ul, .alert p, .warning ul, .warning p
}
// Combinators on outer, inner, or alone
ul > { li { ... } } // => ul > li
h2 { + p { ... } } // => h2 + p
// Need &:hover / &.is-active? See parent selector &Pattern: open an outer rule → nest related children → Sass writes the combined CSS selectors.
How nesting expands beyond a single pair:
| Pattern | Result idea |
|---|---|
| Plain nest | nav { ul } → nav ul |
| Selector lists | Each side expands, then commas recombine |
> / + / ~ | Combinator can sit on outer, inner, or between |
Parent & | For pseudo-classes and more—not a plain space join |
Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).
Nest ul, li, and a under nav.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}nav wraps related children.nav in the SCSS source.Comma-separated selectors nest pairwise, then recombine.
.alert, .warning {
ul, p {
margin-right: 0;
margin-left: 0;
padding-bottom: 0;
}
}Place >, +, or ~ on the outer, inner, or middle.
ul > {
li {
list-style-type: none;
}
}
h2 {
+ p {
border-top: 1px solid gray;
}
}
p {
~ {
span {
opacity: 0.8;
}
}
}ul >.+ p.~.One parent, two children—readable without deep trees.
.card {
padding: 1rem;
.title {
font-weight: 700;
}
.body {
color: #444;
}
}.card .title / .card .body.&Plain nesting adds a space; & attaches a pseudo-class instead.
.btn {
color: #111;
&:hover {
color: #000;
}
}:hover alone would be invalid here..btn..btn:hover, not .btn :hover.Most nesting bugs are too much depth or forgetting & for states.
Each level multiplies specificity and file size. Prefer shallow structures.
&:hover attaches; a bare nested :hover is not the same as a descendant join.
Two parents and two children become four selectors—check the compiled CSS.
Hyphenated property namespaces (like font-) live on property declarations, not this page.
Selector nesting is core Sass on Dart Sass.
| Topic | Status |
|---|---|
| Style-rule nesting | Supported — default descendant join |
| Selector lists | Expanded pairwise then recombined |
| Combinators | >, +, ~ nestable |
| Advanced nesting | Use & for non-space joins |
Compile with the Dart Sass CLI.
& for states and prefixes.One line: nest style rules to combine selectors—keep depth low and reach for & when a plain space is not enough.
Practical checklist:
1. Nest related selectors under one parent
2. Expect a descendant join unless you add a combinator or &
3. Expand lists carefully (N × M selectors)
4. Prefer 2–3 levels of nesting
5. Use & for :hover, .is-active, and similarWork with numbers, units, and arithmetic in Sass.
8 people found this page helpful