Question

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

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

Answer 1

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

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

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

Answer 2

如果您正在选择使用哪个，this article on css-tricks可能会对您感兴趣。

我已经体验到使用LESS或SASS比缺点更有优势。虽然这肯定是一个缺点，但我只能建议你很好地构建你的文件，所以你可以使用其他参考资料轻松找到你寻找的任何样式，这里有一些你可以做的事情：

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

<强> SASS

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

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

编辑：截至2014-07-06，该插件已无法下载。 FireSass has been discontinued.

Chrome / Webkit版本已经在网络上出现，并且Chrome中的测试版功能增加了对SASS调试的支持。它基于firefox版本中使用的相同调试信息。至今尚未能正确判断其中任何一项，也未发现在撰写本文时公开接受的作为插件的插件。

少 / STYLUS

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

Answer 3

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

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

div#awesome aside ul

就像发现一样简单：

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

（虽然我们尝试不超过3层）

我对SASS没有真正的经验但是我不喜欢几年前我第一次看到它时从CSS中移除了多少（并且从那以后就没有回来了......）

Answer 4

一些提示：

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

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

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

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

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

在sass --watch命令中，为-g添加--debug-info，以便输出插件运行所需的挂钩。

Answer 5

由于firesass，我从少到几岁换成了萨斯。有了这个，你就可以在萤火虫中找到原始的sass系列。

如果您使用sass

，请

安装firesass

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

5 个答案: