我正在尝试创建一个在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;
}
Name error: #namespace is undefined
但是,字符串插值是成功和有效的.事实上,如果我拿走了.test部分并修改了以上输出一个测试属性,我可以看到CSS被正确解析了.我的意思是：
.define(@var,@ns){
#@{ns} {
@foo: @var;
prop: @foo;
}
}
.define(0,namespace);
输出以下CSS：
#namespace {
prop: 0;
}
解决方法
这不能完成
您目前无法在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本身来完成.
