在LESS CSS中动态定义变量

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图通过实际分配变量的组合名称来创建一个可在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;
}

回答：

回答：

LESS当前无法实现您想要做的事情。 （换句话说，不是完全动态的），我可以想到两种可能的“解决方法”

。然后可以执行以下操作之一：

回答：

.define(@var) {
  @fooBar: 0;
  @fooTwo: 2;
  @fooYep: 4;
  @fooSet: 'foo@{var}';
}
.define(Two);
.test {
  .define(Bar);
  prop: @@fooSet;
}
.test2 {
  prop: @@fooSet;
}

回答：

.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;
}

回答：

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

回答：

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

以上是 在LESS CSS中动态定义变量 的全部内容， 来源链接： utcz.com/qa/436220.html

回到顶部