Sass TutorialLesson 5Free preview

Sass Nesting

This lesson is part of SASS · All levels

Summary

Nesting allows you to write selectors within other selectors following the HTML structure so that the stylesheet reads more intuitively. Sass also supports parent selectors with the mark & to refer to parent selectors, for example on state hover. The wise use of nesting keeps the selector shallow so that the CSS results are not too specific.

Key points

Nesting places the child selector inside the parent selector block
Mark & refers to the parent selector, useful for pseudo-classes and modifiers
The element selector should not be stacked too deep to keep the specificity low.
The compilation results remove the child selector at the outermost level

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.