如何检查预编译缩小 SASS 代码

Question

我正在使用 Codekit 通过 Sass 缩小我所有的 CSS。这很好用，但在检查代码时会导致问题，因为所有内容都出现在第 1 行！我使用这些行作为快速查找我正在寻找的代码的方法。

我使用 Coda 的 Codekit 插件，这意味着每次我对 .scss 文件进行更改并保存时，它都会自动编译代码。

我想每个人都会告诉我在发布之前不要编译代码，在一个理想的世界里这很好但是 总是 需要检查代码而不是一旦它全部已编译。

有办法解决这个问题吗？或者这是编译代码的缺点？人们经过哪些过程才能获得缩小的代码？我怎么知道更改在哪个 .scss 中？

我可以将它设置为较少压缩，这样它就不会全部放在一行上，但这样我就会失去压缩它的好处。

这些是我将 Codekit 设置为的设置：

Answer 1

Codekit 支持 Source Maps，这会让 Google Chrome 向您显示 原始代码 即使在缩小之后。

在您的编译设置中，选中 为 SASS 创建源映射 复选框。

有关详细信息，请查看此 Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation。