Skip to content

Indirect mixin calls / Mixin references #1338

Closed
@glasserc

Description

@glasserc

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};
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions