Chrome开发工具/ Firebug中的Less / Sassdebugging

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

我喜欢的关于开发工具/ Firebug的一件事是能够看到一个CSS样式的行号。 除了必须手动search.less / .scss文件来查找我想要修改的代码之外,是否有一种使用CSS预处理程序执行此操作的好方法?

Chrome开发者工具现在支持Sassdebugging开箱即用。

已更新为包含源地图:
以前的版本在你的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

旧版本:
首先,你应该打开--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