Question

I have several .list elements which all need a red color. Of these .list elements, the ones with class .foo would need a bigger font, whereas .bar would need a smaller font.

In CSS, it would be along the lines of:

.list {
  color: red;
}

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

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

Is there a way in Stylus to get this without using .list thrice? I know this works:

.list
  color red

.list.foo
  font-size 150%

.list.bar
  font-size 75%

I would like something like the following instead, so as to make it clearer everything belongs to .list elements, with certain constraints (.foo, .bar) added for specific properties. The following, however, selects descendants instead:

.list
  color red

  .foo
    font-size 150%

  .bar
    font-size 75%

Is there a syntax in Stylus that allows this kind of structure, i.e. to filter elements inside .list, and apply certain properties to each “branch” (.list.foo, .list.bar)?

Answer 1

Stylus makes use of & to reference the selector in the previous nesting level (the “parent selector”), similarly to Sass/SCSS and LESS. This is shown in the Selectors reference for Stylus.

I haven’t used Stylus before, but see if the following works for you:

.list
  color red

  &.foo
    font-size 150%

  &.bar
    font-size 75%