2.4 KiB
declaration-nested-properties
Require or disallow properties with - in their names to be in a form of a nested group.
/* This is properties nesting: */
font: {
size: 16px;
weight: 700;
}
Sass official docs on nested properties.
Options
string: "always"|"never"
"always"
Every property with a - in its name must be inside a nested property group.
Property names with browser prefixes are ignored with always.
The following patterns are considered warnings:
a {
margin-left: 10px;
}
a {
font: {
size: 10px;
}
font-weight: 400; // This one should be nested either
}
The following patterns are not considered warnings:
a {
margin: {
left: 10px;
}
}
a {
font: 10px/1.1 Arial {
weight: bold;
}
}
a {
-webkit-box-sizing: border-box;
-webkit-box-shadow: 1px 0 0 red;
}
"never"
Nested properties are not allowed.
The following patterns are considered warnings:
a {
margin: {
left: 10px;
}
}
a {
background: red {
repeat: no-repeat;
}
}
The following patterns are not considered warnings:
a {
background-color: red;
background-repeat: no-repeat;
}
a {
background:red {
color: blue;
}
}
/* There is no space after the colon in `background:red` so it is considered A SELECTOR and is compiled into:
a background:red {
color: blue;
}
*/
Optional options
except: ["only-of-namespace"]
Works only with "always" and reverses its effect for a property if it is the only one with the corresponding "namespace" (e.g. margin in margin-top) in a ruleset.
The following patterns are considered warnings:
a {
font-family: Arial, sans-serif;
font-size: 10px;
}
a {
font: {
size: 10px; // Only one rule nested (reverse "always")
}
}
a {
font: {
size: 10px; // Prop 1, ...
}
font-weight: 400; // ... prop 2, so must be nested as well
}
The following patterns are not considered warnings:
a {
position: absolute;
background-color: red; // no other `background-` properties in a ruleset
}