Как нацелиться на после элемента с двумя классами с SCSS?

Question

Я знаю, что если вы хотите нацелить div с двумя классами с SCSS, это должно быть сделано так:

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 {
        /* enter code here */
        &:after{
            /* enter code here */
        }
    }
}

Answer 3

Попробуйте:

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