CODEWITHSUNDEEP
csspreprocessorstylus
Abiel Muren
Abiel Muren

Reputation: 365

Stylus: Iterate multiple selectors for one rule

I want to iterate a selector with a different number to create multiple selectors separated with commas assigned to one rule.

I made a search but didn't found any similar example on the documentation.

I was trying on with the following code:

for num in (1..6)
  .foo-{num}
    color #dfd

But get multiple rules too.

What I would like to achive is the following:

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #dfd;
}

Upvotes: 1

Views: 295

Answers (3)

OddMorning
OddMorning

Reputation: 471

It can also be achieved using +cache(key), where key is a unique string

for num in (1..6)
  .foo-{num}
    +cache('foo')
      color #f00

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #f00;
}

Upvotes: 0

Wilhelm Olejnik
Wilhelm Olejnik

Reputation: 2507

join(range)
  str = ''
  for n in range
    str += ',.foo-' + n

{join(1..5)}
  color: #dfd

http://stylus-lang.com/docs/iteration.html#functions

EDIT: solution for problem mentioned in comment

multisize(sizes, before, after)
  str = ''
  for size in sizes
    str += before + size + after + ','

{multisize(xs sm lg, 'cs.btn-', '.btn-blue:hover')}
  color: #dfd

Upvotes: 1

user4994625
user4994625

Reputation:

If you use @extend you get the selectors separated by comma, you can use a placeholder selector for the rules:

Stylus

$rules
  color #dfd

for num in (1..6)
  .foo-{num}
    @extend $rules

Output

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #dfd;
}

Upvotes: 1

Related Questions