Use mixin argument to create class name in LESS

Question

I'm trying to create a simple mixin in LESS for different colors I'll use for a website.

What i want is use mixin argument as a part of class name as well.

@green: #5FBEAA; // my color variable

.text-color(@color) {
    .text-{@color} {
        color: @color;
    }
}

.text-color(@green);

The output i'm getting is:

.text-#5FBEAA {
  color:#5FBEAA
}

What I want is:

.text-green {
  color:#5FBEAA
}

@blonfu i tried it in SASS/Stylus. it doesn't works that way.. my mistake. I had used that something else. got it wrong here. — Deepak Yadav, Sep 12 '16 at 08:34
ok, it seemed to me strange that you could access the variable name that way. — , Sep 12 '16 at 08:42

score 5 · Accepted Answer · 2016-09-12T10:35:47.203

5

I think I have the solution using Variable Names.

Less

@green: #5FBEAA;

.text-color(@colorname) {
  @color: ~"@{colorname}";
  .text-@{color}{
    color: @@color;
  }
}

.text-color(green);

Output

.text-green {
  color: #5FBEAA;
}

edited Sep 12 '16 at 10:35

answered Sep 12 '16 at 10:09

Nice approach. Can you explain me, why we need to assign value to `@color` variable with `~@{colorname};` even if I write like this `@colorname;`, itl works. Is there any valid reason behind it? – Deepak Yadav Sep 12 '16 at 10:27
Can be replace `~"green"` by `green` in the call and looks better, I forgot to remove it after the tests I did. I have use `~@{colorname}` to get `green` as string. I edited the answer – Sep 12 '16 at 10:35

score 2 · Answer 2 · answered Sep 12 '16 at 09:04

I don't think its possible. The closest solution for this will be using an additional variable.

@green: #5FBEAA;
 .text-color(@name,@color) {
     .text-@{name} {
         color: @color;
     }
 }
 .text-color(green,@green);

This will compile to

.text-green {
  color: #5FBEAA;
}

2 Answers2