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

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

2 голосов
/ 22 января 2012

У меня есть несколько .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)?

1 Ответ

5 голосов
/ 22 января 2012

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

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

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%
...