我使用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
当然,我尝试已生成的类后使用的混入。 它看起来像 LESS不知何故不会在内部登记等生成的类它产生他们之后,但我可能是错的。
有没有办法重新使用此类生成的类为其他类混入? 作为以较少的很新的,它们的文档是相当少约生成的类,我在一个总损失(特别是因为这是似乎是混入被接受的唯一语法)。
感谢您阅读我。
注:我为什么用这样的类生成的原因是因为他们是远远超过上述(觉得嵌套类,都依赖于一组通用的参数)的例子比较复杂,我嵌入各种生成的类@media
查询支持在“禅”时尚任何装置类型。 最后我得到的东西,如:
@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
解决方案/测试用例
这是一个测试案例@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;
}
但随后通过调用混入/发电机建设类:
.mtStandard {#genMarginTop(40px);}
.mtHalf {#genMarginTop(20px);}
而这样一来,他们是可以使用的混合类对象=)
.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
}
或东西做更令人兴奋的东西的论据
UPDATE LESS 1.7+(工程根据需要)
的.@{name}
作为原题曾渴望语法现在只是工作。
LESS 1.4+解决方法实际使用动态类名称
我想出了一个变通为此而对另一个问题的工作,所以我张贴它作为第二个答案,因为它会在比我更早的答案完全不同的方向。
这种解决方案需要几个步骤(这样是不是在更小的最终解决将是为方便),但将给予能够使用动态生成的类名的实际功能 。
首先:定义动态类
这就像你的计划。
#genMarginTop (@name, @size) {
.@{name} { margin-top: @size; }
}
#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);
二:编译文件到CSS
因此,可以说您编译dynamicClasses.less
到dynamicClasses.css
。 这将导致动态类名称为“解决”实际类。
第三:导入CSS一样都不能少到使用动态类名称的第二 LESS文件
使用类型转换为@import
,我们这样做:
@import (less) dynamicClasses.css;
这需要在这些决定的类名dynamicClasses.css
文件,并导入它们为少 ,这使得所有的类名现已作为混入。 所以,当你想要的,你可以这样做:
.someClass {
.mtStandard; // will work
// more stuff
}
我同意。 它看起来像LESS不适合混入目的注册这些类。
不完整的解决方案
这更少的代码:
#genMarginTop (@name, @size) {
@genMarginTopNameCheck: @name;
.get(@name) when (@name = @genMarginTopNameCheck) { margin-top: @size; }
.@{name} { .get(@name); }
}
#genMarginBot (@name, @size) {
@genMarginBotNameCheck: @name;
.get(@name) when (@name = @genMarginBotNameCheck) { margin-bottom: @size; }
.@{name} { .get(@name); }
}
#genMarginTop(mtStandard, 40px);
#genMarginBot(mbStandard, 20px);
#genMarginTop(mtSpecial, 80px);
.myClass {
.get(mtStandard);
.get(mbStandard);
}
.myClass2 {
.get(mtSpecial);
.get(mbStandard);
}
产生这个CSS
.mtStandard {
margin-top: 40px;
}
.mbStandard {
margin-bottom: 20px;
}
.mtSpecial {
margin-top: 80px;
}
.myClass {
/* NOTE the mtStandard definition is missing here !!! */
margin-bottom: 20px;
}
.myClass2 {
margin-top: 80px;
margin-bottom: 20px;
}
最终问题的说明及Disscussion化解
每个混入正在定义一个守卫.get()
以关闭混入@name
拿到的风格,那就是交叉检查,以一种独特的NameCheck
为mixin的变量名。 你所有的实际代码中定义的.get()
并混入用于实际产生的.@{name}
类代码。
这产生了实际的类名,每次工作正常。 但是,目前的getter函数只工作了最后一个使用混入定义的类名。 所以你可以在上面看到,我的GET呼吁 mtStandard
不工作,因为我的设置 mtSpecial
显然已经覆盖了#genMarginTop
.get()
与混入mtSpecial
定义。
现在,我想你会想打电话给#getMarginTop
和您的其他类似的混入不止一次,所以显然这仍然是一个不完整的解决方案 。 我已经想通了如何可以得到由顶层混入生成的类用作使用另一个类“混入” .get()
但我还没有想出如何使.get()
当顶级混入又被称为没有得到覆盖。