在LESS CSS中动态定义变量

Question

我试图通过实际为它们分配一个复合名称来创建一个动态定义LESS CSS变量的mixin.

简化的用例(不是真实的):

.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本身来完成.