LESS CSS中的动态变量名称

Question

我已经尝试了一段时间，看着其他答案，但无济于事。希望有人可以帮助我。

我正在尝试在mixin中生成一些动态变量名。

变量已经定义：

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

等。

我想要的mixin会是这样的：

.horizontal-variant(@variant) {
    color: @{horizontal-@{@variant}-color}
}

我期待的结果，当被召唤时：

.horizontal-default{
   .horizontal-variant(~"default");
}
.horizontal-inverse{
   .horizontal-variant(~"inverse");
}

是

.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}

不幸的是我每次都遇到错误。

我知道这可以做到，我已经看到它被用在Font Awesome LESS中，其中@{fa-css-prefix}在变量中定义。我在项目中运输相同的解决方案时遇到了麻烦。

您可以尝试在http://lesstester.com/

上测试代码

Answer 1

您可以使用 Variable Names 。我已经在http://lesstester.com/测试了代码，但它确实有效。

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

.horizontal-variant(@variant) {
  @color: "horizontal-@{variant}-color";
  color: @@color;
}

.horizontal-default{
  .horizontal-variant(~"default");
}
.horizontal-inverse{
  .horizontal-variant(~"inverse");
}