Dynamically class in mixin

Question

I have the following definition:

.f-color {
    .a {color:  #000000;}
    .b {color:  #ffffff;}
}

.f-type {
    ._36 {
        font-family: Arial;
        font-size: 36px;
    }
    ._24 {
        font-family: Arial;
        font-size: 24px;
    }
}

I want to create mixin that will look like this:

.a_36 {
   color: #000000;
   font-family: @font-omnes-light;
   font-size: 36px;
}

I tried the following function:

.buildForColor(a);
.buildForColor(b);

.buildForColor(@c){
    .@{c}_36  {
        .f-color > .@{c};
        .f-type > ._36;
    }
}

But I'm getting an error with the line: .f-color > .@{c};

How can I pass the letter "a" so it will look like: .f-color > .a;

Thanks in advance

Do the opposite (make CSS styles to use parametric mixins instead of trying to emulate parametric mixins via predefined CSS classes (as it's just flawed)). For [example](http://less2css.org/#%7B%22less%22%3A%22.buildForColor(a)%3B%5Cn.buildForColor(b)%3B%5Cn%5Cn.buildForColor(%40c)%20%7B%5Cn%20%20%20%20.%40%7Bc%7D_36%20%20%7B%5Cn%20%20%20%20%20%20%20%20.f-color(%40c)%3B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20etc.%5Cn%20%20%20%20%7D%5Cn%7D%5Cn%5Cn%2F%2F%20...%5Cn%5Cn.f-color(a)%20%7Bcolor%3A%20%20%23000000%7D%5Cn.f-color(b)%20%7Bcolor%3A%20%20%23ffffff%7D%5Cn%22%7D). — seven-phases-max, Mar 29 '16 at 14:30
Also, in general your example loos like a perfect example for [lists](http://stackoverflow.com/questions/34643549). — seven-phases-max, Mar 29 '16 at 14:33

score 0 · Answer 1 · answered Mar 29 '16 at 12:48

I found other way to define it:

In variables.less I defined:

@main_color_a: #000000;
@main_color_b: #ffffff;

Then in the mixin.less I defined:

.f-type {
    ._36 {
        font-family: Arial;
        font-size: 36px;
    }
    ._24 {
        font-family: Arial;
        font-size: 24px;
    }
}

.buildForColor(a);
.buildForColor(b);

.buildForColor(@c){
    .@{c}_36  {
        color:  ~"@{main_color_@{c}}";
        .f-type > ._36;
    }
}

The compiled css looks like this:

.a_36 {
  color: #000000;
  font-family: Arial;
  font-size: 36px;
}
.b_36 {
  color: #ffffff;
  font-family: Arial;
  font-size: 36px;
}

Dynamically class in mixin

1 Answers1