CODEWITHSUNDEEP
cssloopsmixinsstylus
Sim Sca
Sim Sca

Reputation: 433

Stylus create mixins via loop

My goal is create a group of mixins via array. My idea is apply code as follows:

f_colors = (f1 f2 f3 f4 f5)
for $i in 0..length(f_colors)
    v = f_colors[$i]
    num = $i+1

   f{num}cl()
      color v

   f{num}bg()
      background-color: v

// and use to generate css
body
   h1
       color: white
       f5bg ''

where in f_colors i've stored a colors list. With thi example, i would obtain an output as

body h1 {
   background-color: #00f; // f5 color
   color: white;
}

is it possible, or my best could be use mixins as follows:

fbg(num)
    background-color: f_colors[num-1]

fcl(num)
    color: f_colors[num-1]

Thanks for reading.

Upvotes: 1

Views: 265

Answers (1)

Ven
Ven

Reputation: 19039

You have to resort to using the define BIF:

$colors = (f1 f2 f3 f4 f5)
for $c, $i in $colors
  define("f"+($i + 1)+"bg", @() {
    background-color: $c
  })

// and use to generate css
body
  h1
    color: white
    f5bg ''

Upvotes: 2

Related Questions