S CSS целевой класс до: hover

Question

Когда я внутри: hover, я хочу продолжить добавление предыдущего класса, используя &

Но когда я использую & inside: hover - он формирует класс вместе с: hover

] 1

ЧТО Я ХОЧУ: внутри :hover { } Я хочу продолжить подобную «цепочку», вместо того, чтобы набирать весь класс с самого начала

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

При компиляции получается так:

And I want to compile like this:

введите описание изображения здесь

Answer 1

Вы можете сохранить амперсанд & через переменную.

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