Chrome开发工具/ Firebug中的Less/Sass调试

Question

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

我喜欢Dev Tools/Firebug的一个方面就是能够看到css样式的行号.除了必须手动搜索.less/.scss文件以找到我想要修改的代码之外,还有一种很好的方法可以使用CSS预处理器吗？

Answer 1

Chrome开发者工具现在支持开箱即用的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.启用开发人员工具实验
4.在检查器(F12)中,打开"设置",然后转到"实验"选项卡并选中"支持SASS".

Answer 2

如果您正在选择应该使用哪个,那么关于css-tricks的这篇文章可能会让您感兴趣.

我已经体验到使用LESS或SASS比缺点更有优势.虽然这肯定是一个缺点,但我只能建议您很好地构建文件,以便您可以使用其他引用轻松找到您寻找的任何样式,以下是您可以执行的一些操作:

• 记录样式表的区域; 即/* General */,/* Header */与/* Footer */
• 对可以快速识别的类使用逻辑和敏感名称(并且不要将它们编号为error1-error10或其他内容)
• 学习剖析class/element/id选择器并思考如何/在何处编写它们.
• 使用CTRL+ F,通常精确属性或靠近它的一个很容易找到这种方式

上海社会科学院

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

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

编辑:截至2014-07-06,该插件已无法下载.FireSass已停产.

Chrome/Webkit版本已经在网络中出现,并且Chrome中的测试版功能增加了对SASS调试的支持.它基于firefox版本中使用的相同调试信息.一直没能正确判断其中的任何作为然而,也发现了一些东西,公开接受作为作业写这篇文章的插件.

LESS/STYLUS

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

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