:hover之前的SCSS目标类 [英] SCSS target class before :hover

问题描述

当我进入:hover时，我想继续使用&

添加上一课

但是当我使用&在:hover内部-它与:hover一起形成类

]

我想这样编译:

解决方案

您可以通过变量保留与号& .

  .parent {$ this:& ;;&:hover {#{$ this} __ variation--active {背景:红色；}}} 

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:

解决方案

You can keep the ampersand & via a variable.

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

这篇关于:hover之前的SCSS目标类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！