Фильтрация внутри селектора стилуса

У меня есть несколько элементов .list, которым нужен красный цвет. Из этих .list элементов для элементов с классом .foo потребуется шрифт большего размера, тогда как для .bar потребуется шрифт меньшего размера.

В CSS это будет примерно так:

.list {
  color: red;
}

.list.foo {
  font-size: 150%;
}

.list.bar {
  font-size: 75%;
}

Есть ли способ в Stylus получить это, не используя .list трижды? Я знаю, что это работает:

.list
  color red

.list.foo
  font-size 150%

.list.bar
  font-size 75%

Вместо этого я хотел бы что-то вроде следующего, чтобы было понятнее, что все принадлежит элементам .list с определенными ограничениями (.foo, .bar), добавленными для определенных свойств. Однако вместо этого выбираются потомки:

.list
  color red

  .foo
    font-size 150%

  .bar
    font-size 75%

Есть ли в Stylus синтаксис, который позволяет использовать такую ​​структуру, т.е. фильтровать элементы внутри .list и применять определенные свойства к каждой "ветви" (.list.foo, .list.bar)?


css stylus css-selectors
person pimvdb    schedule 22.01.2012    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Stylus использует & для ссылки на селектор на предыдущем уровне вложенности («родительский селектор»), аналогично Sass/SCSS и LESS. Это показано в справочнике по селекторам для Stylus.

Я раньше не пользовался Stylus, но посмотрите, подойдет ли вам следующее:

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%
person BoltClock    schedule 22.01.2012