Как это правильно написать с использованием SCSS?

Question

[Сергей Горячев]

Бывает так, что затупишь на какой-то простой фигне.
На jQuery добавляю класс .active к .navicon, чтобы вместо "бутерброда" появился "крестик".
Что-то не соображу, как это правильно оформить на .scss
https://jsfiddle.net/yo4bta8x/

Answer 1

[Андрей Б.]

&.active {
        &__lines {
          ...
        }
    }

Компилируется в .navicon.active__lines:before поэтому и не работает.
Вешайте active на .navicon__lines, помимо этого в стилях еще нужно дописать.
Итог

Comments

[Сергей Горячев]

А, блин, вот оно что)

[Влад]

Это пользователю придется целиться в полосочки. Не очень практично будет.

[Сергей Горячев]

Result007: Я буду по клику на навикон, менять стили навикон_лайнс, тогда не придется. Просто запутался к чему добавлять актив)) Все норм будет)

[Влад]

Понял :)

[Андрей Б.]

Result007 Sergey Goryachev Кстати да, не подумал ). Ну тогда такая запись .navicon.active .navicon__lines, правда феншуй БЭМа пропадает. И в стилях background-color transparent переместить

[Сергей Горячев]

Андрей Б.: Result007: Всё, спасибо, допилил вот так. https://jsfiddle.net/tLv7h0zw/3/

[Андрей Б.]

Sergey Goryachev Как вариант, но по идее так нельзя писать ) для этого есть событийные классы. Но зато работает )))