在LESS CSS中动态定义变量

Question

我试图通过实际分配变量的组合名称来创建一个可在LESS CSS中动态定义变量的混合模块。

简化的用例（不是真正的用例）：

.define(@var){
    @foo{var}: 0;
}

然后人们会这样称呼mixin：

.define('Bar'){
    @fooBar: 0;
}

由于使用选择器名称时可以进行这种字符串内插，因此我想知道变量名称是否也可以使用；到目前为止，我对尝试过的各种语法都没有运气（除上述语法外，我尝试了转义，引用，使用~前缀等等）。

编辑

我又尝试了另一件事，我觉得自己可能会接近。但是我遇到了LESS语法的奇怪问题。如果我这样写：

.define(@var){
    #namespace {
         @foo: @var;
    }
}

然后这样称呼它：

.define(0)

然后@foo，我可以以通常的 命名空间 方式使用：

.test {
     #namespace;
     property: @foo; /* returns 0 */
}

但是，对于插入字符串的选择器，这并不适用：

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
    }
}

.define(0, namespace);

.test {
     #namespace;
     property: @foo;
}

上面的代码给我以下错误：

名称错误：#namespace未定义

但是，字符串插值成功且有效。事实上，如果我.test删除该部分并修改上面的内容以输出测试属性，则可以看到CSS解析正确。我的意思是：

.define(@var, @ns){
    #@{ns} {
         @foo: @var;
         prop: @foo;
    }
}

.define(0, namespace);

输出以下CSS：

#namespace {
    prop: 0;
}

Answer 1

这无法完成

LESS当前无法实现您想要做的事情。 如果您提前知道要允许使用哪些变量名 （换句话说，不是完全动态的），我可以想到两种可能的“解决方法”
。然后可以执行以下操作之一：

想法＃1（变量）

.define(@var) {
  @fooBar: 0;
  @fooTwo: 2;
  @fooYep: 4;

  @fooSet: 'foo@{var}';
}

.define(Two);
.test {
  .define(Bar);
  prop: @@fooSet;
}
.test2 {
  prop: @@fooSet;
}

想法2（参数混合）

减

.define(@var) {
  .foo() when (@var = Bar) {
    @fooBar: 0;
  }
 .foo() when (@var = Two) {
    @fooTwo: 2;
  }
 .foo() when (@var = Yep) {
    @fooYep: 4;
  }
  .foo();
}

.define(Two);
.test {
  .define(Bar);
  prop: @fooBar;
}
.test2 {
  prop: @fooTwo;
}

CSS输出（两个想法都适用）

.test {
  prop: 0;
}
.test2 {
  prop: 2;
}

结论

但是我不确定它是否真的有用，也不知道它在您的实际用例中是否可以有任何实际的应用程序（因为您提到的不是真正的用例）。如果要在LESS中使用完全动态的变量，则不能通过LESS本身来完成。