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

您可以使用变量名称.我在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);
}