css3 - Generating classes with a loop -

css3 - Generating classes with a loop -

i have list of colors , want generate classes using these colors:

css

@color1: #b37974; @color2: #ffa385; @color3: #ff5500; @color4: #b2682e;

this code i'm using:

less

.loopingclass(@index) when (@index > 0) { @ctype: "color@{index}"; .setclass(@color,@cindex) { .btn-color-@{cindex} { background-color:@{color} ; } } .setclass(e(@@ctype),@index); .loopingclass(@index - 1); }; .loopingclass(2);

when seek compile code gulp, receive "unrecognised input" error. when remove background-color: @{color} error goes away. error in code?

update:

the right code is:

.loopingclass(@index) when (@index > 0) { @ctype: "color@{index}"; .setclass(@color,@cindex) { .btn-color-@{cindex} { background-color:@color ; } } .setclass(@@ctype,@index); .loopingclass(@index - 1); }; .loopingclass(2);

as mentioned in comments above error there in e function (which not create sense there). right code this:

@color1: #b37974; @color2: #ffa385; @color3: #ff5500; @color4: #b2682e; .loopingclass(@index) when (@index > 0) { @ctype: "color@{index}"; .setclass(@color, @cindex) { .btn-color-@{cindex} { background-color: @color; } } .setclass(@@ctype, @index); .loopingclass(@index - 1); } .loopingclass(2);

in fact can simplified just:

@color1: #b37974; @color2: #ffa385; @color3: #ff5500; @color4: #b2682e; .loopingclass(@index) when (@index > 0) { .btn-color-@{index} { @color: "color@{index}"; background-color: @@color; } .loopingclass(@index - 1); } .loopingclass(2);

more on whole thing more simple since don't need emulate arrays via "indexed variable names" because can utilize array straight (unless need refer vars separately elsewhere):

@colors: #b37974, #ffa385, #ff5500, #b2682e; .loopingclass(2); .loopingclass(@index) when (@index > 0) { .loopingclass(@index - 1); .btn-color-@{index} { background-color: extract(@colors, @index); } }

and (since entered "optimizations never end" mode anyway), same thing bit of syntactic sugar:

@import "for"; @colors: #b37974 #ffa385 #ff5500 #b2682e; .btn-color- { .for(@colors); .-each(@color) { &@{i} {background-color: @color} } }

where imported for thefor.

css3 less