create new variables from array in less

Question

is it possible in LESS to loop trough an array of colors and create new global variables for them?

e.g

//array
@colors: 'main #0f0', 'second #f00', 'third #00f';

// what i would like to have:
@main-color: #0f0;
@second-color: #f00;
@third-color: #00f;

already tried some js looping etc but I always stucked on actually passing the names to a new variable, or better said define a new variable WITH a variable

any ideas?

see: http://stackoverflow.com/questions/29079094/less-generate-variables-with-loops — Bass Jobsen, Mar 22 '15 at 23:32
http://runnable.com/UnP3Yzjpzm8_AAB2/how-to-modify-variables-for-less-js that would be an idea if i could access the compiler somehow — ceed, Mar 22 '15 at 23:55
Since you're using javascript anyway just convert your array of strings into `var: value` format right within your script. No need to bother Less with this. Note that `modifyVars` gracefully can accept arrays too. — seven-phases-max, Mar 23 '15 at 00:44
Well maybe I should have pointed this out earlier. I want to create a mixin/function that creates less modules for each color i define. But I also want the variables defined for later use. So basically i need to be able to automatically run mixins for each defined color. I discoverd that stylus could be a pretty neat solution for this. but since i already wrote 90% of my stuff in less it would'nt be a productive move.. — ceed, Mar 23 '15 at 00:49
Possible you should add more code to make your problem clear. You can call mixins inside a loop, see: http://stackoverflow.com/questions/25306437/less-loops-used-to-generate-column-classes-in-twitter-how-do-they-work/26653893 — Bass Jobsen, Mar 23 '15 at 13:57

score 1 · Answer 1 · answered Mar 23 '15 at 22:41

1

.colors(@mixin) {
    @helpercolorname: extract(@pp-module-variations, 1);
    .color-looper(
        1;
        @colorname:   @helpercolorname;
        @colorvalue: ~"@{pp-@{helpercolorname}-color}"
    ) ;
    .color-looper(@i;@colorname;@colorvalue) {
        @length: length(@pp-module-variations);
        @last: `( @{i} == @{length} )` ;
        & when (@last = false) {
            @colorname-intern:   extract(@pp-module-variations, @i + 1) ;
            @colorvalue-intern: ~"@{pp-@{colorname-intern}-color}";
            @mixin();
            .color-looper(@i + 1 ;@colorname:@colorname-intern;@colorvalue:@colorvalue-intern) ;
        }
        & when (@last = true) {
            @mixin();
        }
    }
}

this is my loop for now works properly.

i definded some colors like this

@pp-default-color: #22A7F0;

and added them to

@pp-module-variations: ~"default", some, other, colors;

this successfully loops trough all the colors on this mixin, and also passes the name and the value to it.

.colors({
    .some-class-with-@{colorname} {
       color: @colorvalue;
    }   
})

answered Mar 23 '15 at 22:41

ceed

689
1
6
15

This looks a little more verbose than necessary. At quick glance [this snippet](https://gist.github.com/seven-phases-max/4826dcfa1d4af42a0d44) will do the same in a bit more clean manner. – seven-phases-max Mar 23 '15 at 23:19
But getting back to the question itself I guess the solution here would be some function to extract a value from a list by key. E.g. by using `at(@pp-colors, some)` instead of `@pp-some-color` (and I heard there's some development going in this direction, after all this is how such things work in less exotic languages). – seven-phases-max Mar 23 '15 at 23:26
@seven-phases-max well this snippet has the problem that it works just once since the scoping is kinda sucky in less. So for example if you use it the second time the value always will be the first input.. – ceed Mar 24 '15 at 16:10
okay i found out what causes this problem in the first place. Since the variable is defined globally after the first mixin is completed it adapts to the global rather than the local one. Would be cool to somehow unset a global variable and do this on the last iteration. Any ideas ;) ? – ceed Mar 24 '15 at 16:35
That's just an example. Put `& {}` around conflicting scope and problems solved (e.g. [like this](https://gist.github.com/seven-phases-max/48d8a40c3a1be849d7e6)). Speaking of "scoping": it is actually quite well defined in Less, what is really sucking is a necessity to use caller scope variables in the called entity (which is banned in most of languages) like in this case - and this is the root of "all those scoping problems". – seven-phases-max Mar 24 '15 at 17:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73682/discussion-between-stefan-hovelmanns-and-seven-phases-max). – ceed Mar 24 '15 at 17:11

score 0 · Answer 2 · answered Mar 24 '15 at 17:07

That works perfectly fine for me

#colors(@list,@before,@after,@style) {
    @length: length(@list);
    .colors(@style,@name,@color) { @style(); }
   .-(@length);
    .-(@i) when (@i > 0) {
        @intern: extract(@list, @i); 
        .colors(@style,@intern,~"@{@{before}@{intern}@{after}}");
        .-(@i - 1);
    }

}

and here we call it

#colors(@pp-module-variations;pp-;-color; {
    .colors-template(@name,@color);
});

any suggestions for improving are welcome

create new variables from array in less

2 Answers2