| 4 | Advanced Scoping |
In Task 2, Scoping Selectors with Nesting, we introduced selector 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 you need to be more explicit. The last example didn’t specify that the children were direct children. In standard CSS, you can specify this directness as parent > child. If your CSS is rusty, that means finding a tag named <child>, which is exactly one level inside of a <parent> tag.
Using these kinds of CSS operators in Sass is as simple as you’d hope. As you can see in the example, a child selector can start with a > inside of the parent definition. Conversely, a parent can end with a >, affecting all
Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
