下面的 less 将指向html>body form
尽管定义是明确的input
。
但是,这在使用&
运算符时可以正常工作,但是更改所有像这样的 less 定义是很痛苦的
html>body form {
input {
color: cyan !important;
}
& input {
background: yellow !important;
}
}
我认为这可能是less支持的其他运算符的范围,但永远不会更少,源映射应该正确支持空或任何运算符,因为它是有效的less代码。
我认为这是因为 less 实际上标记了来自不同地方的选择器的不同部分..所以它告诉 chrome 选择器的第一部分来自第 3 行,第二部分来自第 9 行。当 less 使用&
它实际上破坏了实现,而 less 只告诉 chrome 关于第二部分。
然而,鉴于 chrome 中的信息无论如何都非常粗略,我们可能应该只显示选择器最后一部分的信息。
注意:#1715 的解决方法是控制并单击属性而不是选择器。
注意 2:chrome 不会修复它,所以它必须以更少的方式解决,可能会找到最后一个元素索引? 在选择器中
我已经测试了以下示例代码: http :
#main {
max-width: 500px;
color: white;
.sub-container {
color: blue;
}
}
我发现问题不仅发生在 chrome 中,而且发生在 Firefox 中。 然后我尝试使用 gulp-less 和 gulp-sourcemap 编译代码(我希望 gulp-sourcemap 使用不同的源映射生成器)。 gulp 构建也没有解决问题。
当我用 sass 编译相同的代码时,生成的源映射在 chrome 和 FF 中都正确指向 4。
另一方面,Less 在某些时候有正确的行号(使用 --line-numbers=comments):
/* line 1, /t.less */
#main {
max-width: 500px;
color: white;
}
/* line 4, /t.less */
#main .sub-container {
color: blue;
}
是的,但仅适用于非“嵌套规则”
如果在大规则中嵌套任何内容,则所有源映射行都将指向其顶部。
最有用的评论
注意:#1715 的解决方法是控制并单击属性而不是选择器。
注意 2:chrome 不会修复它,所以它必须以更少的方式解决,可能会找到最后一个元素索引? 在选择器中