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

你们如何维护用更少的/Sass构建的CSS

---

我喜欢Dev-Tools/Firebug的一点是能够看到css样式的行号。除了手动搜索.less/.scss文件以查找我要修改的代码之外，CSS预处理器还有什么好方法可以做到这一点吗？

如果您正在选择应该使用哪种预处理器，您可能会感兴趣

我逐渐体会到，使用更少或更少的SASS优势大于劣势。虽然这肯定是一个缺点，但我只能建议您将文件组织得很好，以便使用其他引用可以轻松找到您想要的任何样式，以下是您可以做的几件事：

• 记录样式表的区域；ie

  /*常规*/

  ，

  /*页眉*/

  和

  /*页脚*/

• 对可以快速识别的类使用逻辑和合理的名称（不要像error1-error10之类对它们进行编号）
• 学习剖析类/元素/id选择器，并思考如何/在何处编写它们
• 使用CTRL+F，通常通过这种方式很容易找到精确属性或其附近的属性

SASS

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

编辑：从2014年7月6日起，该插件不再可供下载

Chrome/Webkit版本已经在网络上出现，Chrome中有一个测试版功能，可以添加对SASS调试的支持。它基于firefox版本中使用的相同调试信息。到目前为止，还不能正确地判断它们中的任何一个，也没有发现一些在本文撰写时被公开接受的插件

更少/触笔

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

---

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

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

div#ul

很容易找到：

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

（尽管我们尽量不超过3层）

我没有使用SASS的实际经验，但我不喜欢几年前我第一次看到它时它离CSS有多远（从那以后就再也没有回来过…

一些提示：

• 在版本控制中包括.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

命令中，为

--debug info

添加一个

-g

，这样它将输出插件运行所需的钩子

因为firesass，我从less切换到sass。 有了这个，你就可以在firebug中获得原始的sass行

---

如果您使用sass，请安装Chrome Developer Tools现在支持sass即时调试

更新以包括源地图：
以前的版本在css中使用内联注释来提供对源代码的引用（参见下面的操作）。sass（3.3+）和chrome（31+）的最新版本使用源地图：

确保您拥有Sass 3.3.x

使用

--sourcemap

标志编译Sass

在Chrome/ium开发工具中打开设置并单击常规

启用“启用CSS源映射”

有关更多信息，请访问Chrome开发工具博客：

旧版本：
1.首先，您应该在启用

--debug info

的情况下编译Sass。
2.在Chrome/ium中转到大约：标志
3.启用开发人员工具实验
4.在检查器（F12）中，打开“设置”，然后转到“实验”选项卡

---

并检查“支持SASS”

SASS是一样的，令人恐惧的是他们现在看起来有多像；LESS从SASS中窃取，我认为visa也一样，在LESS底部的某个地方遇到SASS的版权标记是很有趣的，颜色函数就在那里。@sg3s啊，我只在它有（缩进语法）的时候才看到它（缩进语法）[这对我来说已经足够远了，不值得这么做。但是从来没有看到过SASS的版权标记。（快速ctrl-f显示什么。）我一直认为新的CSS模式对于SASS来说是一个不太受欢迎的功能。无论哪种方式，它们都非常有用！酷！谢谢大家。是的，似乎良好的代码组织+命名约定会大有帮助。注意：最近的