Chrome开发工具/ Firebug中的更少/简单调试

由于失礼，我从少变了。这样，您将在Firebug中获得原始的Sass行。

如果使用sass，请安装firesass

我很少在LESS中进行维护/调试的问题-我们总是在服务器端进行编译，并且仅引用HTML页面中的CSS文件。这样一来，网页和光盘上的文件始终保持一一对应的关系。

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

div#awesome aside ul

就像发现一样容易：

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

（尽管我们尝试的深度不超过3层）

我对SASS并没有真正的经验，但是我不喜欢几年前第一次看CSS时离CSS有多远（从那以后再也没有回来...）

一些技巧：

• 在版本控制中同时包含.sass和.css文件。这样，每个人都有最新的变化。
• 如果将样式表组织到逻辑区域中，则维护很容易。
• 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.

Ex: $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.

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

In your sass --watch command, add a -g for --debug-info so that it will output the hooks needed for the plugin to run.

Chrome Developer Tools现在支持开箱即用的Sass调试。

已更新为包括源地图：
先前版本在CSS中使用内联注释来提供对源代码的引用（请参见下面的方法）。sass（3.3+）和chrome（31+）的最新版本为此使用了源映射：

1. 确保您拥有Sass 3.3.x
2. 用--sourcemap标志编译您的Sass 。
3. 在Chrome / ium DevTools中打开设置，然后单击常规。
4. 启用“启用CSS源地图”。

有关更多信息，请访问Chrome开发者工具博客：https： //developers.google.com/chrome-developer-tools/docs/css-preprocessors

旧版本：
1.首先，应在--debug-info打开状态下编译Sass 。
2.在Chrome / ium中，转到about：flags。3
.启用Developer Tools实验
。4.在检查器（F12）中，打开“设置”，然后转到“ Experiments”标签，然后选中“ Support for SASS”。