在mixin中动态分类

Question

我有以下定义：

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

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

我想创建看起来像这样的mixin：

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

我尝试了以下功能：

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

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

但是我收到了一行错误：.f-color＆gt; 。@ {C};

我怎样才能通过这封信＆＃34; a＆＃34;所以它看起来像：.f-color＆gt; .A;

提前致谢

Answer 1

我找到了定义它的其他方法：

在variables.less我定义：

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

然后在mixin.less我定义：

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

编译后的css如下所示：

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