css - SCSS伪:after and "class" with ampersand

Question

我试图做的是将 transition 应用于应用了 active 类的元素。基本上我尽量不复制我的 SCSS(即使我知道一旦编译它就会在 CSS 中复制)。 active 类所做的只是更改三 Angular 形的 bottom-border-color。

> li {

    &:after {
        position: absolute;
        content: '';
        border-bottom: 30px solid transparent;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        bottom: -100px;
        left: 50%;
        @include transform(0, -50%);
        @include transition(border-bottom-color .3s ease-in);

        &.active {  // this obviously doesn't work - nor does &.active:after
            border-bottom-color: $color-bg-green;
        }
    }
}

Answer 1

我觉得应该这样写。我认为您不能将 .active 类链接到 :after 中。

> li {

    &:after {
        position: absolute;
        content: '';
        border-bottom: 30px solid transparent;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        bottom: -100px;
        left: 50%;
        @include transform(0, -50%);
        @include transition(border-bottom-color .3s ease-in);
    }    

    &.active:after {
        border-bottom-color: $color-bg-green;
    }

    /** alternative if you have properties to set for .active **/
    &.active {
      someProperty: someValue;

      &:after {
        border-bottom-color: $color-bg-green;
      }
    }
}