Question

我对使用其他变量名声明的变量有疑问。在下面的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:@@label-class;并在此行中删除错误。我应该做些什么修改才能很好地编译我的这部分。

TY。

Answer 1

Lessj4似乎仅支持引用的字符串值的变量引用，因此您必须拆分连接并在那里转义（即不要将~"..."用于@@个变量）。例如。第一个mixin看起来像这样：

.label-color(@color) {
    @label-color_: "label-@{color}";
    @label-color: @@label-color_;

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

第二个mixin的相同变化。（假设两个mixins都被调用为.label-color(~"red");或类似.label-color(potato);）。

较少编译变量与其他变量名称错误

1 个答案: