Closed
Description
Hi, I didn't see this in the open issues, so forgive me if it's called something else and I didn't see it..
At work we have a standard set of "colors" that we'd like to use in a lot of places. We'd like to define a mixin that we can use to repeat mixins for each color. An example of what we'd like:
.forManyColors(@mixinName) {
.@{mixinName}("red");
.@{mixinName}("blue");
.@{mixinName}("green");
.@{mixinName}("purple");
}
.background(@color){
.background-@{color} {
background-image: url("my-background-@{color}.jpg");
}
}
.forManyColors("background");
Ideally, this should compile to:
.background-red {
background-image: url("my-background-red.jpg");
}
.background-blue {
background-image: url("my-background-blue.jpg");
}
.background-green {
background-image: url("my-background-green.jpg");
}
.background-purple {
background-image: url("my-background-purple.jpg");
}
Unfortunately, it seems like interpolation in mixin names isn't possible. The code above gives me:
ParseError: Syntax Error on line 2 in /home/ethan/tmp/foo.less:2:18
1 .forManyNumbers(@mixinName) {
2 .@{mixinName}(4);
3 .@{mixinName}(3);
Here's another example:
.mixin-1 {
width: 100px;
}
.mixin-2 {
background-color: red;
}
@mixinNumber: 1;
.some-element {
.mixin-@{mixinNumber};
}