LESS CSS：重用生成。@ {name}类作为混合 [英] LESS CSS: Reuse generated .@{name} class as a mixin
问题描述
我使用LESS CSS 1.3.3。对不起，如果这个问题已经提出，我没有在网上找到任何相关的。
我有几个类生成器看起来像这样（例子极其简化，只是足以触发错误）：
#genMarginTop（@name，@size）{
。@ {name} {margin-top：@size; }
}
然后我使用它们生成一些实际的类：
#genMarginTop（mtStandard，40px）;
#genMarginTop（mtHalf，20px）;
到目前为止，LESS正确地生成了这些类，我可以在HTML中使用它们。
然而，当我想重用这样一个生成的类作为mixin别的地方，我得到一个错误：
。 someClass {
.mtStandard; // will not work，see error below
//更多的东西
}
我得到的错误是：
NameError：.mtStandard未定义在/.../example.less:161： 4
160 .someClass {
161 .mtStandard;
162 //更多的东西
当然，我尝试使用mixin 类已生成。 看起来像在生成它们之后，在某种程度上不会在内部注册这些生成的类，但是我可能错了。
有没有办法重用这样生成的类作为其他类中的混合？ LESS是一个相当新的，他们的文档对生成的类很稀疏，我完全失去了（特别是因为这是唯一的语法
$ b
注意：我使用这种类生成器的原因是因为它们比上面的例子复杂得多（想到嵌套类都依赖于一组通用的参数）在各种 @media 查询中嵌入生成的类以支持禅方式的任何设备类型。最后我得到了像：
@media（max-width：1024px）{
#genSomething ，somethingParam1，...）;
#genSomething（somethingElse，somethingElseParam1，...）;
#genStuff（stuff，stuffParam1，...）;
}
@media（max-width：240px）{
#genSomething（something，somethingParam2，...）;
#genSomething（somethingElse，somethingElseParam2，...）;
#genStuff（stuff，stuffParam2，...）;
}
// etc
< h1>解决方案/测试用例
这里是一个测试用例@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;
}
。显式输入{
margin-top：1;
}
.reuseExplicit {
margin-top：1;
margin-bottom：1;
}
.reuseExplicit输入{
margin-top：1;
}
.generated {
margin-top：1;
}
。生成输入{
margin-top：1;
}
.reuseGenerated {
margin-top：1;
margin-bottom：1;
}
.reuseGenerated输入{
margin-top：1;不幸的是，你可以通过下面的方法来解决这个问题：
}
选择器插值只是字符串插值，然后将字符串打印到css中，因此在较少的运行中不会生成类对象。
因此，您可以设计一个生成器/ mixin，包括您的操作：
#genMarginTop（@size）{
margin-top：@size;
}
但是通过调用mixins / generators构建类：
.mtStandard {#genMarginTop（40px）;}
.mtHalf {#genMarginTop（20px）;}
这样，它们是可以用于mixin =的类对象）
.someClass {
background-color：#FFF;
.mtStandard;
//更多的这个东西
}
这看起来有点傻这个简单的例子，但也许像这样：
#bggenerator（@color）{
background-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）;
//更多的这个东西
}
令人兴奋的东西与参数
I'm using LESS CSS 1.3.3. Sorry if this question has already been asked, I didn't find anything relevant on the web.
I have several class generators that look like this (example extremely simplified, just enough to trigger the error):
#genMarginTop (@name, @size) {
.@{name} { margin-top: @size; }
}
Then I use them to generate some actual classes:
#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);
So far, so good, LESS correctly generates those classes and I can use them in the HTML. However when I want to reuse such a generated class as a mixin somewhere else, I get an error:
.someClass {
.mtStandard; // won't work, see error below
// more stuff
}
The error I get is:
NameError: .mtStandard is undefined in /.../example.less:161:4
160 .someClass {
161 .mtStandard;
162 // more stuff
Of course I try to use the mixin after the class has been generated. It looks like LESS somehow won't register such generated classes internally after it generates them, but I could well be wrong.
Is there a way to reuse such generated classes as mixins in other classes? Being quite new with LESS, and their documentation being rather sparse about generated classes, I'm at a total loss (especially since this is the only syntax that seems to be accepted for mixins).
Thanks for reading me.
Note: The reason why I use such class generators is because they are much more complex than the example above (think nested classes that all depend on a common set of parameters), and I'm embedding the generated classes in various @media queries to support any device type in a "Zen" fashion. In the end I get something like:
@media (max-width: 1024px) {
#genSomething(something, somethingParam1, ...);
#genSomething(somethingElse, somethingElseParam1, ...);
#genStuff(stuff, stuffParam1, ...);
}
@media (max-width: 240px) {
#genSomething(something, somethingParam2, ...);
#genSomething(somethingElse, somethingElseParam2, ...);
#genStuff(stuff, stuffParam2, ...);
}
// etc
Solution / test case
Here's a test case for @MartinTurjak 's solution, I can confirm that this works as expected, nested classes and everything:
.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;
}
Which correctly generates: (notice how explicit/generated yield the very same result)
.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;
}
Unfortunately. The selector interpolation is just string interpolation, and the string gets then printed into css, so no class object is generated in the less run.
So you can design a generator/mixin, that includes your operation:
#genMarginTop (@size) {
margin-top: @size;
}
But then build classes by calling the mixins / generators:
.mtStandard {#genMarginTop(40px);}
.mtHalf {#genMarginTop(20px);}
And this way they are class objects that you can use for mixin =)
.someClass {
background-color: #FFF;
.mtStandard;
//more of this stuff
}
This looks a bit silly in this simple example, but maybe something like this:
#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
}
Or something that does even more exciting stuff with the arguments
这篇关于LESS CSS：重用生成。@ {name}类作为混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
