.grid {
$g: &;
&__column {
> div {
#{$g}:hover & {
// ...
// equals
.grid:hover .grid__column > div
// ("Caching" that first `&` can be very useful.)
///////////////////////
// Also useful when you're trying to do this...
.tooltip {
&--center&--up {
transform-origin: bottom center;
}
}
// But you have to instead write it like this...
.tooltip {
$t: &;
&--center#{$t}--up {
transform-origin: bottom center;
}
}