Sass Basics: Nesting

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:

[code language="sass"] div { p { color: black; } } [/code]

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

[code language="css"] div p { color: black; } [/code]

Continue reading %Sass Basics: Nesting%

by Reggie Dawson via SitePoint