如何使用SCSS将具有两个类的元素的目标定位？

Question

我知道，当您要使用SCSS将具有两个类的div作为目标时，应该这样进行：

HTML：

<div class="item active">...</div>

SCSS：

.item {
  &.active {
   /* enter code here */
  }
}

但是当我要定位元素的之后时，该怎么办？与CSS一样：

.item.active:after {
/* enter code here */
}

谢谢！

Answer 1

好吧，您可以通过几种方式完成

a。如果您还想向.active类中添加一些样式，则应使用此样式。

.item {
  background: red;
  height: 100px;
  width: 100px;
  &.active {
    &:after{
      content: "aaa";
    }
  }
}

或

b。如果:after具有类item

，仅想向active伪元素添加一些样式，则应使用此方法

.item {
  background: red;
  height: 100px;
  width: 100px;
  &.active:after{

      content: "aaa";

  }
}

请参见jsFiddle

Answer 2

尝试：

.item {
   &.active {
     &:after {
     /* enter code here */
     } 
   }
 } 

Answer 3

.item {
    &.active {
        /* enter code here */
        &:after{
            /* enter code here */
        }
    }
}