scss 如何做SASS祖父母选择器

Posted 2021-05-17

.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;
  }
}