CSS Chrome Dev Tools/Firebug 中的 Less/Sass 调试

Less/Sass debugging in Chrome Dev Tools/Firebug

提问by Dave Stibrany

How do you guys do maintenance on CSS built with Less/Sass?

你们是如何维护使用 Less/Sass 构建的 CSS 的？

One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?

我喜欢 Dev Tools/Firebug 的一件事是能够查看 css 样式的行号。除了必须手动搜索 .less/.scss 文件以查找我要修改的代码之外，是否有使用 CSS 预处理器执行此操作的好方法？

采纳答案by tsi

Chrome Developer Tools now supports Sass debugging out-of-the-box.

Chrome 开发人员工具现在支持开箱即用的 Sass 调试。

Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:

更新以包含源映射：
以前的版本在您的 css 中使用内联注释来提供对源代码的引用（请参阅下面的操作方法）。最新版本的 sass (3.3+) 和 chrome (31+) 为此使用源映射：

1. Make sure you have Sass 3.3.x
2. Compile your Sass with the --sourcemapflag.
3. In Chrome/ium DevTools open settings and click general.
4. Turn on "Enable CSS source maps".

1. 确保你有 Sass 3.3.x
2. 用--sourcemap标志编译你的 Sass 。
3. 在 Chrome/ium DevTools 中打开设置并单击常规。
4. 打开“启用 CSS 源映射”。

More info is available on the Chrome dev tools blog: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Chrome 开发工具博客上提供了更多信息：https: //developers.google.com/chrome-developer-tools/docs/css-preprocessors

Older versions:
1. First, you should compile your Sass with --debug-infoturned on.
2. In Chrome/ium go to about:flags
3. Enable Developer Tools experiments
4. In your inspector (F12), open "Settings", then go to the "Experiments" tab and check "Support for SASS".

旧版本：
1. 首先，您应该在--debug-info打开的情况下编译您的 Sass 。
2. 在 Chrome/ium 中转到 about:flags
3. 启用开发者工具实验
4. 在您​​的检查器 (F12) 中，打开“设置”，然后转到“实验”选项卡并选中“支持 SASS”。

回答by sg3s

If you're making a choice as to which you should be using, this article on css-tricksmight be of interest to you.

如果您正在选择应该使用哪个，这篇关于 css-tricks 的文章可能对您感兴趣。

I have come to experience that using LESS or SASS has more advantages than disadvantages. Though this is certainly a disadvantage I can only suggest you structure your files well so any styles you seek are easily found using other references, here are a few things you can do:

我已经体验到使用 LESS 或 SASS 的优点多于缺点。虽然这肯定是一个缺点，但我只能建议您很好地构建文件，以便使用其他参考文献可以轻松找到您寻求的任何样式，您可以执行以下操作：

• Document areas of your stylesheet; ie /* General */, /* Header */and /* Footer */
• Use logical and sensible names for classes you can recognize quickly (and don't number them like error1-error10 or something)
• Learn to dissect the class/element/id selectors and think about how/where you would have written them.
• Use CTRL+F, often the precise attribute or one near it is fairly easily found this way

• 记录样式表的区域；即/* General */，/* Header */和/* Footer */
• 为您可以快速识别的类使用合乎逻辑且合理的名称（不要像 error1-error10 之类的那样给它们编号）
• 学习剖析 class/element/id 选择器并思考如何/在哪里编写它们。
• 使用CTRL+ F，通常可以很容易地通过这种方式找到精确的属性或其附近的属性

SASS

SASS

There is now a way to debug SASS in firefox using an extension that reads and displays the sass files in the firebug inspector. To use, install the extension and enable the respective debug flags.

现在有一种方法可以使用扩展程序在 firefox 中调试 SASS，该扩展程序可以在 firebug 检查器中读取和显示 sass 文件。要使用，请安装扩展并启用相应的调试标志。

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Edit: as of 2014-07-06, this plugin is no longer available for download. FireSass has been discontinued.

编辑：截至 2014-07-06，此插件不再可供下载。FireSass 已停产。

Chrome/Webkit versions have been popping up around the net and theres a beta feature in chrome to add support for SASS debugging. It's based on the same debugging information used in the firefox version. Haven't been able to judge any of them properly as of yet, nor found something which is publicly accepted as being the plugin for the job as of this writing.

Chrome/Webkit 版本已经在网络上出现，并且在 chrome 中有一个测试版功能来添加对 SASS 调试的支持。它基于 firefox 版本中使用的相同调试信息。到目前为止，还无法正确判断其中任何一个，也没有发现在撰写本文时被公开接受为该工作的插件。

LESS/ STYLUS

少/手写笔

As this tweet@jaketrent points to explains, there is progress on the debugging side in chrome, but nothing baked in yet and given the state of the LESS github it might still take a while... Both solutions are based on the beta feature for SASS debugging support in chrome, basically adding the same debug information as SASS does.

正如这条推文@jaketrent 指出的那样，chrome 在调试方面取得了进展，但还没有任何进展，考虑到 LESS github 的状态，它可能仍然需要一段时间......这两种解决方案都基于测试版功能chrome 中的 SASS 调试支持，基本上添加了与 SASS 相同的调试信息。

• https://github.com/cloudhead/less.js/pull/1038
• https://github.com/LearnBoost/stylus/pull/886

• https://github.com/cloudhead/less.js/pull/1038
• https://github.com/LearnBoost/stylus/pull/886

回答by tkone

I rarely have issues with maintenance/debugging in LESS -- we always compile on the server end and reference only the CSS file in the HTML page. This makes it so there's always a one-to-one correspondence with the webpage and a file on disc.

我很少在 LESS 中遇到维护/调试问题——我们总是在服务器端编译并只引用 HTML 页面中的 CSS 文件。这使得网页和光盘上的文件总是一一对应。

And then when I have to edit the LESS file, I find that LESS, since its pretty much CSS+extra markup, it's quite easy to backtrace anything I'm confused about to the originating statement in CSS. If it's a mixin, it's pretty obvious (since I usually use mixins to prevent having to do all the vendor prefix stuff repeatedly), and then it's just a logical hierarchy since we use the class nesting feature, so finding:

然后当我必须编辑 LESS 文件时，我发现 LESS，因为它几乎是 CSS+额外标记，很容易回溯我对 CSS 中的原始语句感到困惑的任何内容。如果它是一个 mixin，那很明显（因为我通常使用 mixin 来防止必须重复执行所有供应商前缀的东西），然后它只是一个逻辑层次结构，因为我们使用了类嵌套功能，所以发现：

div#awesome aside ul

div#awesome aside ul

is as easy as finding:

就像找到一样简单：

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

(although we try to not go more than 3 layers deep)

（虽然我们尽量不超过 3 层深）

I have no real experience with SASS but I didn't like how far removed from CSS it was when I first looked at it a few years back (and haven't been back since...)

我对 SASS 没有真正的经验，但我不喜欢几年前我第一次看到它时它离 CSS 有多远（并且从那时起就没有回来......）

回答by Benxamin

Some tips:

一些技巧：

• Include both the .sass and the .css files in version control. This way everyone has the most current changes.
• If you organize your stylesheets into logical areas, maintenance is a breeze.
• Also: try to use fewer than three main colors, and then use SASS color functions to modify them and store results in variables that you can reuse throughout your design/theme.

• 在版本控制中包含 .sass 和 .css 文件。这样每个人都有最新的变化。
• 如果您将样式表组织成逻辑区域，那么维护就变得轻而易举了。
• 另外：尝试使用少于三种主要颜色，然后使用 SASS 颜色函数来修改它们并将结果存储在您可以在整个设计/主题中重复使用的变量中。

Ex: $chartreuse: #7fff00$olive: darken($chartreuse, 32%)

前任： $chartreuse: #7fff00$olive: darken($chartreuse, 32%)

That way, you only have to maintain one color. And the rest will be recalculated.

这样，您只需保持一种颜色。其余的将重新计算。

---

---

Until recently, there were no in-browser SASS debugging tools.

直到最近，还没有浏览器内的 SASS 调试工具。

There is now a Firefox plugin called FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

现在有一个名为 FireSASS 的 Firefox 插件（https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/）

In your sass --watchcommand, add a -gfor --debug-infoso that it will output the hooks needed for the plugin to run.

在您的sass --watch命令中，添加一个-gfor--debug-info以便它输出插件运行所需的钩子。

回答by yvess

I switched from less to sass, because of firesass. With this you get the original sass line in firebug.

由于 firesass，我从 less 切换到 sass。有了这个，你就可以在 firebug 中获得原始的 sass 行。

install firesassif you use sass

如果您使用 sass，请安装firesass