Question

我已经为bootstrap下载了一个主题，而在他们较少的来源中我有一个mixin：

.label-color(@color) {
  @label-class:~"label-@{color}";
  @badge-class:~"badge-@{color}";
  @label-color:@@label-class;

 .@{label-class}, .@{badge-class} {
    background-color:@label-color !important;
 }  
}

.label-arrow(@color) {
   @label-class:~"label-@{color}";
   @label-color:@@label-class;

  .@{label-class}{
    &.arrowed:before {
        border-right-color:@label-color;
    }
    &.arrowed-in:before {
        border-color:@label-color;
    }
    &.arrowed-right:after {
        border-left-color:@label-color;
    }
    &.arrowed-in-right:after {
        border-color:@label-color;
    }
  }
}
.label-color(~"lime");
.label-color(~"red");

我的问题是@label-color:@@label-class; 因为我的内部编译器less4j在这个双@@给我错误，我不明白为什么。本地编译器Crunch正在工作并且知道要编译，因此语法不正确。有人可以给我一些提示吗，

Answer 1

正如@deceze已经提到的那样，您可以在http://lesscss.org/features/#variables-feature-variable-names处阅读将使用双@在Less中创建变量变量名称：

例如：

@red: darkred;
@color: "red";
p {
color: @@color; 
}

输出：

p {
  color: darkred;
}

请注意，变量名称（@color）应该是一个字符串。

根据以下文档可以在less4j中使用上述内容：https://github.com/SomMeri/less4j/wiki/Less-Language-Variables：

如果变量包含字符串，那么它可以作为参考另一个变量。

用@@含义减少语法

1 个答案: