Geek asks and answers

Is there a way to programmatically build a CSS selector chain in a stylus?

I am trying to figure out how to create a CSS selector in an "in in" loop.

Something along the lines of:

ul
    for row in 1 .. 4
        li*{row}                 <=== thats the tricky part 
            padding: 10px * row

he should give as:

ul li{ padding: 10px }
ul li li{ padding: 20px }
ul li li li{ padding: 30px }
ul li li li li{ padding: 40px }

Is it possible?

+3
source share
2 answers

Yes, it is possible:

ul
  el = ''
  for row in 1..4
    el += ' li'
    {el}
      padding row * 10px

You might want to create a mixin for this, I leave this as an exercise for you!

Edit: Exit:

ul li {
  padding: 10px;
}
ul li li {
  padding: 20px;
}
ul li li li {
  padding: 30px;
}
ul li li li li {
  padding: 40px;
}
+5
source

An example mixin / function for this:

build_selector(selector, count)
  $out = selector

  for i in 1..count
    {$out}
        padding i * 10px
    $out += ' ' + selector


ul
    {build_selector(li, 4)}

It produces:

ul li {
    padding: 10px;
}

ul li li {
    padding: 20px;
}
0
source

More articles:


All Articles