【发布时间】：2013-02-21 13:32:04
【问题描述】：
我经常在 Web 开发者扩展中使用“编辑 CSS”功能来编辑我的样式表。
这是一个很棒的功能，但编辑 css 并将其复制回编辑器保存它需要时间。
我计划在我的下一个项目中使用 Compass，我想知道如何在 SASS/Compass 中使用“编辑 CSS”功能。
【问题讨论】：
标签： sass compass-sass
【发布时间】：2013-02-21 13:32:04
【问题描述】：
没有办法按照您期望的方式执行此操作。
流程必须像以下那样工作 ->
编写 Compass/SCSS -> 刷新页面 -> 编辑 CSS 以获得结果 -> 使用上一步重新编辑 SCSS 和/或复制/粘贴。
因为它可以编译下来，所以我知道还没有解决方案可以将它重新连接到 SCSS 层。
【讨论】：
我认为这与你现在所做的不会有太大的不同..
Compass 将预编译用 Sass/SCSS 编写的样式表，当它到达浏览器时它将是一个常规样式表，因此如果您随后使用浏览器工具栏的“编辑 CSS”功能，它的工作方式与您现在只需要返回 SASS/SCSS 文件并将更改插入到正确的位置（例如，它可能在嵌套规则或 mixin 或函数中，具体取决于您编写 SASS/SCSS 文件的方式) - 然后 Compass 可以重新编译样式表
【讨论】：
-
这就是问题所在 - 它增加了另一个步骤 - 编辑 css，返回并在 sass/scss 中找到它的位置并保存。
代码包
Codekit 是一款适用于 OSX 的出色产品，它允许您编辑本地文件，并且当您点击保存时，它会自动将新编译的样式表注入您的浏览器，而无需刷新页面，因此它至少可以为您节省步。但是，到目前为止，还没有我知道的 Windows 对应项。
我最近在一个使用 SCSS 的大型项目中使用了 Codekit，它确实很有帮助。虽然很遗憾，像你一样，我已经习惯了“编辑 CSS”Web 开发人员工具栏的工作流程，但我还没有找到与 SASS 世界的准确翻译。
网络腻子
另一个具有一定潜力（但有一些严重缺点）的选项是 Fog Creek 的一个开源框架，名为 Web Putty。这是他们提供的一项服务，允许您在浏览器中实时编辑 CSS，包括 SASS 和 SCSS 风格的 CSS，但他们停止了该服务并简单地将软件开源，因此设置它完全取决于您并且需要相当多的努力（THATs缺点）。
【讨论】：
现在可以在 Chrome 开发工具中使用 experimental support for Sass。
首先启用对 Sass 的支持：
然后确保您正在编译为压缩以外的任何内容，并在 Sass 中启用调试信息。如果您从命令行编译，请传递 --debug-info 标志，如果您使用 Compass，请将其添加到您的 config.rb：
sass_options = { :debug_info => true }
Presto，您可以在开发工具中访问 Sass 源代码：
单击开发工具中的行号将允许您编辑和应用本地更改：
就我个人而言，我更喜欢将compass watch 与LiveReload 结合使用并在我的编辑器中进行编辑，但对于那些喜欢在浏览器中进行编辑的人，您现在可以直接编辑Sass 文件。
不要忘记在部署之前编译成压缩文件。
【讨论】：