Sass Basics: Nesting

Originally published at:

When you are just starting out using Sass one of the first features you will hear about is nesting. One reason we may use a preprocessor is to lessen the amount of typing we need to create CSS rules. Nesting allows us to use shortcuts to create our rules. The problem with all great tools is that the potential for misuse is always there. Nesting is no different as overuse can create complex, unmanageable stylesheets.

What is Nesting

Nesting allows you to write selectors that mimic the structure of your HTML. This allows you to use shortcuts to create your CSS. For example:

div {
    p {
        color: black;

This is nesting at its simplest. The div element encloses the P element. This will in turn compile to.

div p { color: black; }

Continue reading this article on SitePoint

Thanks for this intro into the problems the misusage of nesting can lead to. I’ve also written an article about this topic you might be interested in:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.