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

Question

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

В CSS, было бы по линии:

.list { 
    color: red; 
} 

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

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

Есть ли способ в стилус, чтобы получить это без использования .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% 

Есть ли синтаксис в стилусом, что позволяет такого рода структуры, то есть для фильтрации элементов внутри .list, и применить определенные свойства каждой «ветви» (.list.foo, .list.bar) ?

Answer 1

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

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

.list 
    color red 

    &.foo 
    font-size 150% 

    &.bar 
    font-size 75%