0

I am trying to create a less helper file that just creates a bunch of less variables for me. I would like to try to use parameterised mixins to do this so that I can cut down on the amount of repetitive error-prone code. I have been looking for an answer but not found anything yet so just wondering if this is possible.

My goal:

To define a bunch of variables which are named in a certain format, for instance

@MyVar-foo1-bar1
@MyVar-foo1-bar2
@MyVar-foo1-bar...
@MyVar-foo1-barN
@MyVar-foo2-bar1
@MyVar-foo2-bar2
@MyVar-foo2-bar...
@MyVar-foo2-barN
@MyVar-foo(...)-bar(xxx)
@MyVar-fooN-barN

This gets tedious very quickly given that I could potentially have hundreds of variables to declare. It could obviously be tremendously simplified by iterating using mixins. For example..

(Pseudocode only as I can't make it work)

.mymixin (@part1){
    @{MyVar-@{part1}-bar1: value-one;
    @{MyVar-@{part1}-bar2: value-two;
    @{MyVar-@{part1}-bar3: value-three;
    @{MyVar-@{part1}-bar4: value-four;
}
.mymixin(foo1);
.mymixin(foo2);

Should result in no output, but the following variables should be defined for later use:

@MyVar-foo1-bar1: value-one
@MyVar-foo1-bar2: value-two
@MyVar-foo1-bar3: value-three
@MyVar-foo1-bar4: value-four
@MyVar-foo2-bar1: value-one
@MyVar-foo2-bar2: value-two
@MyVar-foo2-bar3: value-three
@MyVar-foo2-bar4: value-four

After creating these manually (ugh), I am able to later use them easily using mixins, e.g.

.useMyVars(@myClass) {
    (~".@{myClass} #id1"){
        cssparameter:~"@{MyVar-@{myClass}bar1}";
    }
    (~".@{myClass} #id2"){
        cssparameter:~"@{MyVar-@{myClass}bar2}";
    }
    (~".@{myClass} #id3"){
        cssparameter:~"@{MyVar-@{myClass}bar3}";
    }
    (~".@{myClass} #id4"){
        cssparameter:~"@{MyVar-@{myClass}bar4}";
    }
}
.useMyVars(foo);

results in:

.foo #id1{
    cssparameter:value1;
}
.foo #id2{
    cssparameter:value2;
}
.foo #id3{
    cssparameter:value3;
}
.foo #id4{
    cssparameter:value4;
}

Now, I tried using string escapes and such but whenever I use it on the left of the ':' operator, I just get a parse error.

Either it can't be done, or I'm missing something :)

Tom17
  • 406
  • 5
  • 18
  • 1
    You cannot assign variables like that. However, are you really repeating values in these variables? Your example mixin would set the same four values, which leads one to question further exactly what you are trying to achieve. There may be a better way of doing it. – ScottS Jun 12 '13 at 00:12
  • OK, I figured it can't be done. Thought it was worth asking first though :) Also, no, I am not repeating values, it was just an example case. I'll have to re-engineer the problem. Thanks :) – Tom17 Jun 12 '13 at 01:37
  • possible duplicate of [Dynamically define a variable in LESS CSS](http://stackoverflow.com/questions/18039082/dynamically-define-a-variable-in-less-css) – Bass Jobsen Oct 27 '14 at 00:49

0 Answers0