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

没有正确的解决方案

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top