Nested Properties
Group properties that share a namespace like font or margin.
Syntax
font: { family: sans-serif; size: 16px; }Some CSS properties share a dotted namespace, such as font-family, font-size, and font-weight. Sass lets you nest these under the common prefix.
This is a minor convenience feature; use it when it improves readability for grouped shorthands like font, margin, padding, or border.
Example
.title {
font: {
family: 'Helvetica Neue', sans-serif;
size: 1.5rem;
weight: 700;
}
margin: {
top: 0;
bottom: 12px;
}
}
/* Compiles to:
.title {
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 12px;
}
*/When to use it
- A developer groups all font-* declarations under a font: namespace block to avoid repeating the 'font-' prefix on every line.
- A team nests all margin-* properties in a margin: {} block to make it visually obvious which spacing declarations belong together.
- A developer uses nested property syntax for border: {} to set border-width, border-style, and border-color in a single grouped block.
More examples
Grouping font properties
Groups all four font-* declarations under the font: namespace, avoiding the repeated 'font-' prefix on each line.
.heading {
font: {
family: 'Inter', sans-serif;
size: 1.5rem;
weight: 700;
style: normal;
}
}Nested margin properties
Nests all four margin sides under a margin: block, compiling to the four individual margin-* longhand properties.
.section {
margin: {
top: 2rem;
bottom: 2rem;
left: auto;
right: auto;
}
max-width: 1200px;
}Border namespace with shorthand base
Combines a shorthand border value with nested property overrides, showing how a namespace block can sit alongside a shorthand.
.box {
border: 1px solid {
color: #e5e7eb;
}
border: {
radius: 4px;
}
}
Discussion