Как продлить компонент, не являющийся классом в SASS

Question

В this example (under Extend/Inheritance) показано, как увеличить размер предопределенного .

.message 
    border: 1px solid #ccc 
    padding: 10px 
    color: #333 

.success 
    @extend .message 
    border-color: green 

Интересно, есть ли способ, чтобы расширить класс . Причина в том, что у меня есть nav и под ним у меня есть ul. Они отформатированы так, как предполагалось, но теперь я хотел бы добавить класс active тоже, который принимает стиль ul в nav и заканчивает его цветом фона.

nav 
    ul 
    font-size: 20px 

.active 
    @extend ??? 
    background: pinky 

Возможно ли и если да, то каким образом? Я не уверен, что делать с Google ...

Answer 1

Это похоже на очень окольный способ применения класса-модификатора (.active). Обычно лучшая практика будет делать это следующим образом:

nav 
    ul 
    font-size: 20px 
    &.active 
     background: pink 

Какой бы компилировать nav ul.active { background: pink } и стиль <nav> <ul class="active"></ul> </nav>.