javascript - LESS:如何使用 dumpLineNumbers

标签 javascript html css debugging less

这可能是一个非常基本的问题。我是 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 的补丁版本,该版本不再可用/不再受支持。

另见:

Less/Sass debugging in Chrome Dev Tools/Firebug

关于javascript - LESS:如何使用 dumpLineNumbers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26315113/

相关文章:

javascript - 如何通过 HTTP 请求从图像 Uri 发送图像? (React Native 和 Django 后端)

javascript - ng-repeat 元素没有显示

html - 试图用 img 替换 fa awesome 图标

css - 没有 styleUrl 的 KML 样式

javascript - 将光标对齐到占位符起始位置

html - 用作后端模板的html的设计过程

javascript - 为什么 bootstrap float-right 类不适用于我的按钮?

javascript - 如何转换 URL 中的 JavaScript

javascript - 如何根据选定的值显示表格?

html - 如何将html代码与css代码分开