less css calling dynamic variables from a loop

Question

What I'm trying to do: I have (for now) 7 colors as variables. I want to be able to use them at several places and iterate throught them.

This is what I have that don't work

@color1:#06A1C0;
@color2:#8F4F9F;
@color3:#ED1D24;
@color4:#5A9283;
@color5:#B38C51;
@color6:#EC008C;
@color7:#8F4F9F;

@iterations: 8;
.mixin-loop (@index) when (@index > 0) {
color@{index}:hover{
  @tmp: ~'@color';
  @num: @index;
      color: @tmp@num;
  }

.mixin-loop(@index - 1);
}
.mixin-loop (0) {}
.mixin-loop(@iterations);

What I need I want this as a result

.color1:hover{color#06A1Co}
.color2:hover{color#8F4F9F}
etc..

What's the problem? I can't find a way to evalute @tmp@num to get the actual variable.

UPDATE Perfect answer provided by Ash Hitchcock below.

score 14 · Accepted Answer · answered Aug 17 '13 at 14:40

I have just been trying todo the same thing today with LESS. The solution I came up with is to use a Parametric Mixin to create (define) the variable, see updated exmaple:

@color1:#06A1C0;
@color2:#8F4F9F;
@color3:#ED1D24;
@color4:#5A9283;
@color5:#B38C51;
@color6:#EC008C;
@color7:#8F4F9F;

@iterations: 7;

.define(@var) {
  @colorSet: 'color@{var}';
}


.mixin-loop (@index) when (@index > 0) {
color@{index}:hover{
    .define(@index);
    color:  @@colorSet;
  }

.mixin-loop(@index - 1);
}
.mixin-loop (0) {}
.mixin-loop(@iterations);

Hope this helps.

Thanks for this. I was able to modify this in combination with the example column loop in the less docs to compile a nested number columns based on a defined number of breakpoints http://codepen.io/onebitrocket/pen/zFwci — Matt, Jul 21 '14 at 16:21

score -1 · Answer 2 · answered Aug 16 '13 at 11:30

-1

Why don't you use them in your CSS file? Why are you trying them in your File? its not a great idea.
Using the CSS for each DIV will be good. Give it a class with the code Like:

<div class='@if(condition == true) {"thisclass"} else {"thatclass"}'></div>

And just use one CSS for all the conditions. That would be simple.

answered Aug 16 '13 at 11:30

Afzaal Ahmad Zeeshan

15,669
12
55
103

Because I don't use the live-compiler script. I compile less-files locally before uploading. – Dio Vayne Aug 16 '13 at 11:36
1

Then why not use simple divs, with simple classes or ids and put them in if else block? Wouldn't that be simple? – Afzaal Ahmad Zeeshan Aug 16 '13 at 11:38
The abundant use of the word simple implies you're correct, but I'm trying to understand how to do this using LESS. I love how I can make dynamic classes, but I want to get the reference to the corresponding variable to work. – Dio Vayne Aug 16 '13 at 11:43
1

If you're trying to say something about Dynamic, that means you want to create divs or spans on the go. But you can write their classnames statically. Without changing them. Else if you want to do something dynamic do it as: `$("div").AddClass("thisclass")` Its jquery. You can use it in head. And then apply the class element to that div and use its properties. You can either change the class properties too. Use style for that element. – Afzaal Ahmad Zeeshan Aug 16 '13 at 12:05
I know how to do this with jQuery, but this is me trying to grasp the power of LESS. – Dio Vayne Aug 16 '13 at 12:08
1

I provided the code for jQuery brother. You can use it in the head as ` ` – Afzaal Ahmad Zeeshan Aug 16 '13 at 12:18
Thanks, but I REALLY don't want to do this with jQuery. – Dio Vayne Aug 16 '13 at 12:40
1

But you said how to do it with jQuery. Ok then do it like this: `
` This way you will be able to give the div a class which is according to the condition. – Afzaal Ahmad Zeeshan Aug 16 '13 at 12:46

less css calling dynamic variables from a loop

2 Answers2

Linked