Referencing Parent Selectors in SCSS

Referencing parent selectors in SCSS

I was going over the SCSS documentation after finding some curious SCSS I was unfamiliar with. Did you know you can generate a CSS rule based on the existence of a parent class without having to nest that CSS within the actual parent?

In CSS, you can only scope an element or class based on its parent if that CSS is embedded within that parent like:

.parent .child {
 background: red;
}

With SCSS, you can re-create this scope without the nesting:

.child {
 .parent & {
 background: red;
 }
}

This can be useful for browser-specific scraping, responsive design elements, or when you find the organization clearer by keeping the child’s style variations centralized rather than scattered ’cross your stylesheets.