current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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.

share|improve this answer
 
Thanks sooo much! This is EXACTLY what I was looking for. –  Dio Vayne Aug 19 '13 at 14:20
add comment
up vote 0 down vote

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.

share|improve this answer
 
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
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
1  
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 Aug 16 '13 at 12:18
1  
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. –  Afzaal Ahmad Zeeshan Aug 16 '13 at 12:46
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.