我正在使用LESS CSS 1.3.3.对不起,如果已经提出这个问题,我在网上找不到任何相关内容.
我有几个类生成器看起来像这样(示例非常简化,足以触发错误)：
#genMarginTop (@name,@size) {
.@{name} { margin-top: @size; }
}
然后我用它们来生成一些实际的类：
#genMarginTop(mtStandard,40px); #genMarginTop(mtHalf,20px);
到目前为止,很好,LESS正确生成了这些类,我可以在HTML中使用它们.
但是当我想在其他地方重用这样生成的类作为mixin时,我收到一个错误：
.someClass {
.mtStandard; // won't work,see error below
// more stuff
}
我得到的错误是：
NameError: .mtStandard is undefined in /.../example.less:161:4
160 .someClass {
161 .mtStandard;
162 // more stuff
当然,我尝试在生成类之后使用mixin.看起来LESS在生成它们之后不会在内部注册这些生成的类,但我可能错了.
有没有办法在其他类中重用这些生成的类作为mixins？作为LESS的新手,他们的文档对生成的类相当稀疏,我完全失去了(特别是因为这是mixins似乎唯一接受的语法).
谢谢你读我
注意：我使用这样的类生成器的原因是因为它们比上面的例子复杂得多(想想所有依赖于一组公共参数的嵌套类),并且我将生成的类嵌入到各种@media查询中以“Zen”方式支持任何设备类型.最后我得到了类似的东西：
@media (max-width: 1024px) {
#genSomething(something,somethingParam1,...);
#genSomething(somethingElse,somethingElseParam1,...);
#genStuff(stuff,stuffParam1,...);
}
@media (max-width: 240px) {
#genSomething(something,somethingParam2,somethingElseParam2,stuffParam2,...);
}
// etc
解决方案/测试用例
这是@MartinTurjak解决方案的测试用例,我可以确认这是按预期工作的,嵌套类和所有内容：
.explicit {
margin-top: 1;
input { margin-top: 1; }
}
.reuseExplicit {
.explicit;
margin-bottom: 1;
}
#generator (@arg) {
margin-top: @arg;
input {
margin-top: @arg;
}
}
.generated { #generator(1); }
.reuseGenerated {
.generated;
margin-bottom: 1;
}
.explicit {
margin-top: 1;
}
.explicit input {
margin-top: 1;
}
.reuseExplicit {
margin-top: 1;
margin-bottom: 1;
}
.reuseExplicit input {
margin-top: 1;
}
.generated {
margin-top: 1;
}
.generated input {
margin-top: 1;
}
.reuseGenerated {
margin-top: 1;
margin-bottom: 1;
}
.reuseGenerated input {
margin-top: 1;
}
解决方法
不幸.选择器插值只是字符串插值,然后将字符串打印到css中,因此在较少的运行中不会生成类对象.
所以你可以设计一个发电机/混合,包括你的操作：
#genMarginTop (@size) {
margin-top: @size;
}
但是然后通过调用mixins / generators来构建类：
.mtStandard {#genMarginTop(40px);}
.mtHalf {#genMarginTop(20px);}
这样它们就是你可以用于mixin =)的类对象
.someClass {
background-color: #FFF;
.mtStandard;
//more of this stuff
}
在这个简单的例子中,这看起来有点傻,但也许是这样的：
#bggenerator (@color) {
background-color: @color;
}
#bggenerator (@color,dark) {
@blend : @color + #842210;
background-color: darken(@blend,30%);
}
#bggenerator (@color,@url,@rest) {
background: "@{color} url('@{url}') @{rest}";
}
.mtStandard {
#genMarginTop(40px);
}
.someClass {
.mtStandard;
#bggenerator(#FFF,"bgimage.png",left top no-repeat);
//more of this stuff
}
或者用参数做更令人兴奋的事情
