这可能是一个非常基本的问题。我是 LESS 的新手,想了解
less JavaScript 对象的 dumpLineNumbers
属性做了什么。我已经添加
它到 html 文件,但在浏览器输出或
浏览器调试工具。它是如何工作的?
这是我使用的源文件:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example Code</title>
<meta name="description" content="Example Code" />
<meta name="author" content="John Doe" />
<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
<script type="text/javascript">less = { env: 'development', dumpLineNumbers: 'mediaQuery' };</script>
<script type="text/javascript" src="less-1.6.0.js"></script>
</head>
<body>
<h1>Less is Cool!</h1>
<p>Hello World!</p>
</body>
</html>
less/styles.css:
.mixin {
color: green;
}
p { .mixin; }
即使我在我的 CSS 中引入了错误,例如如下所示,我删除了右大括号:
h1 {color:red; }
.mixin { color: green; // closing brace omitted on purpose to cause an error
p { .mixin; }
当我删除 dumpLineNumbers
属性时,我仍然没有看到输出有任何差异。
谢谢。
最佳答案
首先,您必须将 mediaquery
写成小写字母,这样至少在 1.7.5 版本之前它都可以在 Less 中工作。
在编译后的 CSS 中,您会发现以下行:
@media -sass-debug-info{文件名{font-family:file:///home/t.less}line{font-family:\0000315}
在你的 index.html 中你应该使用:
<script type="text/javascript">
less = {
env: "development",
dumpLineNumbers: 'mediaquery'
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js" type="text/javascript"></script>
或者,您可以将 #!dumpLineNumbers:mediaquery
附加到 URL。
请注意,您可以通过运行以下命令在服务器端编译时执行相同的操作:
lessc --line-numbers=mediaquery index.less
其次,您应该找到一个可以读取这些 @media -sass-debug-info
行的工具。对于 Firefox,有 fireless ,现在这似乎是一个死胡同。 Fireless 需要 LESS 的补丁版本,该版本不再可用/不再受支持。
另见:
关于javascript - LESS:如何使用 dumpLineNumbers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26315113/