这是我第一次使用 LESS 构建网站,并遇到了以下代码最能描述的问题:
@section-row-padding-size-xs: 30px;
@section-row-padding-size-sm: 50px;
@section-row-padding-size-md: 100px;
@section-row-padding-size-lg: 140px;
.section-row-padding( @size ) {
@padding-size: ~"@{section-row-padding-size-@{size}}";
.section-row {
padding: @padding-size 0;
&.quarter-padding-top {
padding-top: @padding-size * 0.25;
}
&.quarter-padding-bottom {
padding-bottom: @padding-size * 0.25;
}
&.half-padding-top {
padding-top: @padding-size * 0.5;
}
&.half-padding-bottom {
padding-bottom: @padding-size * 0.5;
}
&.three-quarters-padding-top {
padding-top: @padding-size * 0.75;
}
&.three-quarters-padding-bottom {
padding-bottom: @padding-size * 0.75;
}
}
}
这段代码所做的就是输出正确的填充大小以供媒体查询使用。
任何电话至.section-row-padding()
使用 lg、md、sm 和 xs 参数都应该输出适当的填充大小。
该问题是由 @padding-size 不解释为 px 单位而是解释为字符串引起的。我尝试了几种插值方法,但都不起作用。isnumber( @padding-size )
输出假和istring( @padding-size )
输出真。@padding-size + 0px
也不起作用,它说“操作无效类型”。
有什么我错过的吗?
感谢您的时间和答复!
嵌套插值即~"@{section-row-padding-size-@{size}}"
Less 中不正式支持。 (它在当前版本中有效,但最终可能随时停止工作)。
实现你想要的正确方法是:
.section-row-padding(@size) {
@var-name: "section-row-padding-size-@{size}";
@padding-size: @@var-name;
padding: (@padding-size * 2);
}
或更短:
.section-row-padding(@size) {
@padding-size: "section-row-padding-size-@{size}";
padding: (@@padding-size * 2);
}
See “变量引用” for @@
意义。
该问题是由@padding-size
不解释为 px 单位,而是解释为字符串。
确切地。使用~""
就像对编译器说“不要解释这个值,它只是一些带有我希望你传递的值的字符串”。因此返回值的类型~"@{section-row-padding-size-@{size}}"
在您的示例中不是数字,它不能与算术运算一起使用(因此:“对无效类型的操作”)。
(一些“为什么~""
应尽可能避免”:1, 2, 3, 4 etc.).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)