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.

Ash Hitchcock · Accepted Answer · 2013-08-17 14:40:31Z

14

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.

answered Aug 17, 2013 at 14:40

Ash Hitchcock

5593 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Over a year ago

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 codepen.io/onebitrocket/pen/zFwci

Afzaal Ahmad Zeeshan · Accepted Answer · 2013-08-16 11:30:59Z

-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, 2013 at 11:30

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

8 Comments

Dio Vayne Over a year ago

Because I don't use the live-compiler script. I compile less-files locally before uploading.

Afzaal Ahmad Zeeshan Over a year ago

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 Over a year ago

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 Over a year ago

I provided the code for jQuery brother. You can use it in the head as <head> <script> $("div").AddClass("thisclass"); </script> </head>

Afzaal Ahmad Zeeshan Over a year ago

But you said how to do it with jQuery. Ok then do it like this: <div class='@if(condition == true){thisclass} else {thatclass}'></div> This way you will be able to give the div a class which is according to the condition.

|

Collectives™ on Stack Overflow

less css calling dynamic variables from a loop

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related