60

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

我喜欢 Dev Tools/Firebug 的一件事是能够查看 CSS 样式的行号。除了必须手动搜索 .less/.scss 文件来查找我想要修改的代码之外，有没有一种使用 CSS 预处理器的好方法？

4

5 回答 5

33

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. 首先，你应该编译你的 Sass 并--debug-info打开。
2. 在 Chrome/ium 中转到 about:flags
3. 启用开发者工具实验
4. 在检查器 (F12) 中，打开“设置”，然后转到“实验”选项卡并选中“支持 SASS”。

于 2012-10-07T07:16:59.933 回答
28

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

我已经体验到使用 LESS 或 SASS 的优点多于缺点。虽然这肯定是一个缺点，但我只能建议您很好地构建文件，以便使用其他参考轻松找到您寻求的任何样式，但您可以执行以下操作：

  • 样式表的文档区域；即/* General */，/* Header */和/* Footer */
  • 为您可以快速识别的类使用合乎逻辑且合理的名称（不要将它们编号为 error1-error10 之类的）
  • 学习剖析类/元素/id 选择器并思考如何/在哪里编写它们。
  • 使用CTRL+ F，通常通过这种方式很容易找到精确的属性或靠近它的属性

SASS

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

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

编辑：截至 2014-07-06，此插件不再可供下载。FireSass 已停产。

Chrome/Webkit 版本已经在网络上出现，并且 Chrome 中有一个 beta 功能来添加对 SASS 调试的支持。它基于 Firefox 版本中使用的相同调试信息。到目前为止，还无法正确判断它们中的任何一个，也没有找到在撰写本文时被公开接受为该工作的插件的东西。

少/手写笔

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

于 2012-03-26T00:44:36.980 回答
1

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

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

div#awesome aside ul

很容易找到：

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

（虽然我们尽量不超过 3 层深）

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

于 2012-03-26T00:50:19.013 回答
1

由于 firesass，我从 less 切换到 sass。有了这个，你就得到了 firebug 中的原始 sass 行。

如果您使用 sass，请安装firesass

于 2012-04-24T08:27:40.213 回答
1

一些技巧：

  • 在版本控制中包含 .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命令中，添加一个-gfor--debug-info以便它输出插件运行所需的钩子。

于 2012-04-02T19:42:18.613 回答