Originally published at: http://www.sitepoint.com/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:
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; }