SCSS target class before :hover

问题

When I am inside :hover I want to continue adding on previous class using &

But when I use & inside :hover - it forms class along with :hover

]1

WHAT I WANT: inside of :hover { } I want to continue "the chain" like this, instead of retyping whole class from the beggining

&:hover {
  &__accent__product-box { transform: scale(1.1); }
}

This results like this when compiled:

And I want to compile like this:

回答1:

You can keep the ampersand & via a variable.

.parent {
  $this: &;
  
  &:hover {
    
    #{$this}__variation--active {
      background: red;
    }
  }
}

来源：https://stackoverflow.com/questions/63225811/scss-target-class-before-hover