对混入的较少编译失败或给出了错误的css
对混入的较少编译失败或给出了错误的css
提问于 2014-03-26 16:17:56
我的版本是1.6，使用Crunch 1.8.1，我尝试创建动态网格类，如下所示
.grid-12 {
width: 12px;
}
.grid-11 {
width: 11px;
}诸若此类。我的代码部分是
.grid (@index, @colWidth: 80) when (@index > 0) {
(~".grid-@{index}px")
{
width: ~"@{index}px";
}
}但它给出了编译器错误编译器错误无法识别的输入(第:24行)文件名: C:\onepager\styles\style.less
为了解决这个问题，我测试了下面的mixin (递归mixin的一部分)，编译成功，但输出很奇怪，因为~字符没有转义引号，如下所示：
.grid (@index, @colWidth: 80) when (@index > 0) {
(~".grid-")
{
width: ~"@{index}px";
}
}
.grid (0, @_) {}
.grid(12);但是它给我的输出css (“字符保留和~”)下面有crunch
(~".grid-") {
width: 12px;
}当我期待着它的时候
.grid- {
width: 12px;
}`所以编译器错误是由于在less中包含了@{index}px，它在函数下的语句中工作得很好。
回答 1
Stack Overflow用户
发布于 2014-03-26 18:42:47
最后，我确实解决了同样的问题。
不需要转义tild和括号来制作它。
我确实通过以下方式解决了问题
替换
(~".grid-@{index}px")使用
.grid-@{index}px作为：
.grid (@index, @colWidth: 80) when (@index > 0) {
.grid-@{index} {
@width: @index * @colWidth;
width: ~"@{width}px";
}
.grid(@index - 1, @colWidth);
}
.grid (0, @_) {}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22655037
复制相关文章
相似问题
腾讯云开发者
