Chrome开发工具/ Firebug中的Less / Sassdebugging
你们如何对使用Less / Sass构build的CSS进行维护？
我喜欢的关于开发工具/ Firebug的一件事是能够看到一个CSS样式的行号。 除了必须手动search.less / .scss文件来查找我想要修改的代码之外，是否有一种使用CSS预处理程序执行此操作的好方法？
Chrome开发者工具现在支持Sassdebugging开箱即用。
已更新为包含源地图：
以前的版本在你的CSS中使用内联注释来提供源代码的引用（参见下面的操作方法）。 最近版本的sass（3.3+）和chrome（31+）使用源地图：
- 确保你有Sass 3.3.x
- 用
--sourcemap标志编译你的Sass。 - 在Chrome / ium中，DevTools打开设置并单击常规。
- 打开“启用CSS源图”。
有关Chrome开发工具博客的更多信息，请访问： https ： //developers.google.com/chrome-developer-tools/docs/css-preprocessors
旧版本：
首先，你应该打开--debug-info编译你的Sass。
2.在Chrome / ium中转到about：标志
3.启用开发人员工具实验
4.在您的检查员（F12）中，打开“设置”，然后进入“实验”选项卡并检查“支持SASS”。
如果你正在select你应该使用哪一个， 这篇关于CSS技巧的文章可能会对你感兴趣。
我已经体会到，使用LESS或SASS比缺点更有优势。 虽然这当然是一个缺点，但我只能build议你很好地构build你的文件，所以你可以使用其他的引用很容易地find你想要的任何风格，下面是你可以做的一些事情：
- 文档样式表的区域; 即
/* General */，/* Header */和/* Footer */ - 使用逻辑和明智的名字，你可以快速识别的类（不要把它们编号为error1-error10或其他）
- 学习剖析class / element / idselect器，并考虑如何/在哪里写它们。
- 使用CTRL + F ，通常精确的属性或附近的属性很容易以这种方式find
上海社会科学院
现在有一种方法可以在firefox中使用扩展来debuggingSASS，在Firebug检查器中读取和显示sass文件。 要使用，请安装扩展并启用相应的debugging标志。
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
编辑：截至2014年7月6日，这个插件不再可供下载。 FireSass已经停产。
Chrome / Webkit版本已经在networking上出现，并且在Chrome中有一个testing版function来增加对SASSdebugging的支持。 它基于firefox版本中使用的相同的debugging信息。 到目前为止，还没有能够正确判断其中的任何一个，也没有发现在本文撰写时被公认为工作的插件。
LESS / STYLUS
正如@ jaketrent所指出的tweet所要解释的那样，在chrome的debugging方面还有一些进展，但是还没有发现，并且鉴于LESS github的状态，它可能还需要一段时间…这两个解决scheme都基于betafunction在SASSdebugging支持chrome，基本上增加了与SASS相同的debugging信息。
我很less遇到在LESS中进行维护/debugging的问题 – 我们总是在服务器端进行编译，并只引用HTML页面中的CSS文件。 这使得它总是与网页和光盘上的文件一一对应。
然后，当我必须编辑LESS文件时，我发现LESS，因为它非常CSS +额外的标记，所以我很容易回溯到CSS中原始语句的困惑。 如果它是一个混入，这是非常明显的（因为我通常使用混入来防止必须重复做所有的供应商前缀的东西），然后它只是一个逻辑层次，因为我们使用类的嵌套function，所以find：
div#awesome aside ul
就像发现一样简单：
div#awesome{ aside{ ul{ padding: 0; } } }
（尽pipe我们尝试不超过3层深）
我对SASS没有真正的经验，但是我不喜欢CSS离我有多远，几年前我第一次看到它（而且自从…以来一直没有回来）
一些技巧：
- 在版本控制中包含.sass和.css文件。 这样每个人都有最新的变化。
- 如果您将样式表组织到逻辑区域，维护工作将变得轻而易举。
- 另外：尝试使用less于三个主色，然后使用SASS颜色函数来修改它们，并将结果存储在可以在整个devise/主题中重用的variables中。
例如： $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)
这样，你只需要保持一种颜色。 其余的将被重新计算。
直到最近，还没有浏览器中的SASSdebugging工具。
现在有一个名为FireSASS的Firefox插件（https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/）;
在sass --watch命令中，为--debug-info添加-g ，以便输出插件运行所需的钩子。
由于firesass，我从less开始转向sass。 有了这个，你可以在萤火虫里find原来的sass线。
如果你使用sass，请安装firesass
