CODEWITHSUNDEEP
csscss-selectorsstylus
pimvdb
pimvdb

Reputation: 154818

Filtering inside a stylus selector

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)?

Upvotes: 2

Views: 756

Answers (1)

BoltClock
BoltClock

Reputation: 723498

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%

Upvotes: 5

Related Questions