Question

这可能是一个非常基本的问题。我是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>

少/ 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属性时，我仍然没有看到输出有任何差异。

感谢。

Answer 1

首先，你必须写mediaquery小写，而不是在至少版本1.7.5中工作。

在编译的CSS中，您将找到以下行：

@media -sass-debug-info {filename {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附加到网址。

请注意，通过运行以下命令编译服务器端时，可以执行相同的操作：

lessc --line-numbers=mediaquery index.less

其次，您应该找到一个可以读取这些@media -sass-debug-info行的工具。对于Firefox来说，有fireless，现在似乎已经死路一条。 Fireless需要修补版本的LESS，不再可用/支持。

另见：

Less/Sass debugging in Chrome Dev Tools/Firebug

LESS：如何使用dumpLineNumbers

1 个答案: