I am trying to add a transition effect to the element with an applied active class. My goal is to avoid duplicating my SCSS code (even though I understand it will be duplicated in the compiled CSS). The sole purpose of the active class is to modify the bottom-border-color of the triangle.
> 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 {
border-bottom-color: $color-bg-green;
}
}
}