Pragmatic Guide to Sass

7	Going Further with Advanced Scoping

In the last section, we introduced simple nesting. Just throw a selector inside a declaration block and BAM! It automatically scopes the style as being the child of the parent. However, sometimes we need to be more explicit. The last example we gave didn’t specify that the children were direct children. In standard CSS, we specify this directness as parent > child. If your CSS is rusty, that means finding a tag named <child> who’s exactly one level inside of a <parent> tag.

Using these kinds of CSS operators is as simple as you’d hope. Just start the child selector with the operator you want. So the child would be defined as > child inside of the parent definition.

Using nesting is a great way to organize ...