[英]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; // 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, ...);
#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;
}
但是通过调用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
}
或者用参数做更令人兴奋的事情
.@{name}
语法现在可以像原始问题所希望的那样工作。
我在处理另一个问题时想出了一个解决方法,所以我将它作为第二个答案发布,因为它与我之前的答案完全不同。
这个解决方案需要几个步骤(因此不像LESS中的最终修复那么方便),但是会给出能够使用动态生成的类名的实际功能 。
第一:定义动态类
这和你的计划一样。
#genMarginTop (@name, @size) {
.@{name} { margin-top: @size; }
}
#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);
第二步:将该文件编译为CSS
因此,假设您将dynamicClasses.less
编译为dynamicClasses.css
。 这会导致动态类名称“解析”为实际的类。
第三步:将CSS作为LESS导入到使用动态类名的第二个 LESS文件中
使用@import
类型转换 ,我们这样做:
@import (less) dynamicClasses.css;
这将在dynamicClasses.css
文件中获取这些已解析的类名,并将它们作为LESS导入 ,这使得所有类名现在都可用作mixins。 所以你可以按照自己的意愿去做:
.someClass {
.mtStandard; // will work
// more stuff
}
我同意。 看起来LESS没有为mixin目的注册这些类。
这个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;
}
每个mixin都根据@name
定义一个受保护的.get()
mixin来获取样式,然后交叉检查该mixin的唯一NameCheck
变量名。 所有实际代码都在.get()
定义,而mixin用于实际生成.@{name}
类代码。
每次生成实际的类名时都可以正常工作。 但是,目前的getter函数仅适用于最后使用mixin 定义的类名。 正如你在上面看到的那样,我对mtStandard
调用不起作用,因为我的mtSpecial
设置 mtSpecial
已经用mtSpecial
定义覆盖了#genMarginTop
.get()
mixin。
现在我假设您要#getMarginTop
调用#getMarginTop
和其他类似的mixin,所以显然这仍然是一个不完整的解决方案 。 我已经弄清楚如何使用.get()
将顶层mixin生成的类用作另一个类的'mixin',但我还没弄明白如何制作.get()
当再次调用顶级mixin时,不会被覆盖。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.