LESS CSS：重用生成。@ {name}类作为混合

本文介绍了LESS CSS：重用生成。@ {name}类作为混合的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我使用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 解决方案/测试用例 这里是一个测试用例@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:4160 .someClass {161 .mtStandard;162 // more stuffOf 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, ...);}// etcSolution / test caseHere'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}类作为混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！