Deepak Yadav Deepak Yadav - 2 months ago 6
CSS Question

Use mixin argument to create class name in LESS

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
}

Answer

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