SCSS psuedo：afterと "class" with ampersand

Question

私がしようとしているのは、activeクラスが適用されている要素にtransitionを適用することです。基本的に私はSCSSを複製しないようにしようとしています（コンパイルされたCSSで複製されることはわかっていますが）。 activeクラスはすべて、三角形の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

以下のように記載する必要があると思います。私は:afterの中で.activeクラスをチェーンすることはできないと思います。

> 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; 
     } 
    } 
}