Ruleset Nesting
RulesetnestingcanimprovetheorganizingofyourCSSbygroupingrelatedstyles.
Italsosavessomekeystrokes.
ConsiderthefollowingCSSrulesets:
article {
margin: 2em auto;
}
article p {
margin: 0 0 1em;
font-family: 'Droid Serif','Liberation Serif',serif;
}InbothLessandSass,wecanrewritethistotakeadvantageofnesting:
article {
margin: 2em auto;p {
margin: 0 0 1em;
font-family: 'Droid Serif','Liberation Serif',serif;
}
}Thisgivesusadescendantselector,andtheoutputwillmatchthestandardCSS
above.
SassandLessalsoallowyoutoreferencetheparentselectorfromwithinanested
ruleset.Thisisespeciallyusefulwhendealingwithchildselectors(>),pseudo-ele-
ments,andpseudo-classes.Toincorporateaparentselector,useanampersand(&).
Takealookatthefollowingexample:
p {
font-family: 'Droid Serif','Liberation Serif',serif;.error & {
font: bold 11px / 1.5 sans-serif;
}
}Preprocessors 333