| 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 your styles. It means that all of the related styles are grouped together. By default, every child selector is the parent selector plus the child selector. In situations where we want to do something more advanced, we use the & selector. Simply put, & means “the parent selector.” Don’t look scared. It’s easy stuff once it clicks.
Oftentimes, we use a bit of Javascript to add classes to the <body> tag based on what browser the user is using. For instance, if you visit with Safari, the <body> will have the classes .safari and .webkit. So when we’re styling the sidebar, we might want to add a rule that says, “If the body tag has this class, apply this rule,” and it would be nice to have this code near all the related rules. So if we’re inside of .sidebar .item and then we write the child selector body.webkit &, Sass will compile into body.webkit .sidebar .item.
The ampersand got replaced with .sidebar .item, which was the parent’s scope. If it’s still a bit foggy, read over the examples. Then it should click. It really is simple!
| What To Do... |
- Define direct ancestors.
basics/direct_ancestors.scss .infobox > { .message { border: 1px solid red; > .title { color: red; } } .user { border: 1px solid black; > .title { color: black; } } }This compiles to:
.infobox > .message { border: 1px solid red; } .infobox > .message > .title { color: red; } .infobox > .user { border: 1px solid black; } .infobox > .user > .title { color: black; }
- Use the magical &.
basics/ampersand_example.scss .infobox { color: blue; .user & { color: gray; } } .message { color: gray; &.new { color: red; } } .infobox { .user & .message { content: "Selector is '.user .infobox .message'"; } }This compiles to:
.infobox { color: blue; } .user .infobox { color: gray; } .message { color: gray; } .message.new { color: red; } .user .infobox .message { content: "Selector is '.user .infobox .message'"; }