Как получить root права в Stylus?

У меня проблема с корневой вложенностью

для лучшей работы с бем-модулями в Sass мы используем $root

.block
  $root: &
  background: gray
  &__elem
    background: red
    color: black
  &:hover
    #{$root}__elem
      color: white

этот код скомпилирован в:

.block {
  background: gray;
}
.block__elem {
  background: red;
  color: black;
}
.block:hover .block__elem {
  color: white;
}

Как получить этот эффект в стилусе?


stylus root nested bem
person Eugene Balashov    schedule 08.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Стилусы имеют специальные селекторы для того же случая.

stylus-lang.com/docs/selectors.html#initial-reference

Вы можете использовать ~/ или ^[0]

.block
    &:hover
        ~/__elem
            color: white
person Fortael    schedule 08.06.2016
comment
@ЕвгенийБалашов Вероятно, это старая версия. Попробуйте это - stylus-lang.com/ - person Fortael; 09.06.2016
comment
что, если мы используем @extend? - person Eugene Balashov; 28.06.2016
comment
.element › &--modifier › @extend ^[0] — не работает - person Eugene Balashov; 28.06.2016
comment
.element › &--modifier › @extend ~/ — и это не работает - person Eugene Balashov; 28.06.2016
comment
в этом ^ примерах — нам нужно получить стили element в .element--modifier - person Eugene Balashov; 28.06.2016
comment
@ЕвгенийБалашов в том, что это противоречит методологии БЭМ. - person Fortael; 30.06.2016
comment
блок может иметь модификатор с теми же свойствами. я запутался и написал element вместо block - person Eugene Balashov; 30.06.2016
comment
и так нам нужно: .block › &--modifier › @extend ^[0] (стиль .block имеет модификатор с корневым стилем и их особый стиль) - person Eugene Balashov; 30.06.2016
comment
эта альтернатива для sass: .block › $root: & + &--modifier › @extend #{$root} - person Eugene Balashov; 30.06.2016
comment
@ЕвгенийБалашов по-прежнему противоречит методологии БЭМ. Модификатор не должен содержать блочный стиль. Только перезаписывает. Вы можете использовать миксины - person Fortael; 30.06.2016
comment
Оо)) ... что не так? — очень чисто и понятно - person Eugene Balashov; 30.06.2016
comment
миксины тоже работают, но имеют худшую читабельность, а количество строк кода в css увеличено с от 30 до 56  - person Eugene Balashov; 30.06.2016
comment
@ЕвгенийБалашов Это неправильный путь. Должно быть — class="status status--ok" Это верно по методике. Что делать, если вы хотите использовать несколько модификаторов? Как 2_ - person Fortael; 01.07.2016