SCSS target class before :hover

user_14016120 0
Viewed 188

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

enter image description here]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:

enter image description here

And I want to compile like this:

enter image description here

sass css
1 Answers

You can keep the ampersand & via a variable.

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