Compass（s​​ass）和Web开发人员扩展

Question

我经常在Web开发人员扩展程序中使用“编辑css”功能来编辑样式表。

这是一个很棒的功能，但需要时间来编辑css并将其复制回编辑器以保存它。

我计划将Compass用于我的下一个项目，我想知道如何在SASS / Compass中使用“编辑css”功能。

Answer 1

没有办法以你期望的方式做到这一点。

流程必须像以下一样工作 - ＆gt;

写指南针/ SCSS - ＆gt;刷新页面 - ＆gt;编辑CSS以获得结果 - ＆gt;使用上一步重新编辑SCSS，或者复制/粘贴。

因为它编译得很复杂，我所知道的解决方案还没有把它挂钩到SCSS层。

Answer 2

我认为这与你现在正在做的事情没什么不同......

Compass会预先编译用Sass / SCSS编写的样式表，当它到达浏览器时它将是一个常规样式表，所以如果你使用浏览器工具栏的“编辑CSS”功能，它的工作方式与你现在只需要回到SASS / SCSS文件并将更改插入到正确的位置（例如，它可以是嵌套规则或mixin或函数，具体取决于你如何编写SASS / SCSS文件） - 然后Compass可以重新编译样式表

Answer 3

Codekit

Codekit是OSX的绝佳产品，它允许您编辑本地文件，当您点击保存时，它会自动将新编译的样式表注入您的浏览器而不刷新页面，因此它至少可以保存那一步。但是，到目前为止还没有我知道的Windows版本。

我最近在一个非常大的项目中使用了Codekit，我们使用的是SCSS，这当然很有帮助。虽然遗憾的是，和你一样，我已经习惯了“编辑CSS”Web开发人员工具栏工作流程，但我还没有找到SASS世界的精确翻译。

Web Putty

另一个具有一些潜力（但有一些严重缺点）的选择是Fog Creek的一个名为Web Putty的开源框架。这是他们提供的一项服务，允许您在浏览器中实时编辑CSS，包括SASS和SCSS风格的CSS，但他们停止了服务，只是开源软件，所以设置它完全在你身上，需要相当多的努力（THATs）缺点）。

Answer 4

现在可以在Chrome开发工具中使用experimental support for Sass。

首先启用对Sass的支持：

然后确保您正在编译除压缩之外的任何内容并在Sass中启用调试信息。如果您是从命令行进行编译，请传递--debug-info标记，如果您使用的是Compass，请将其添加到config.rb：

sass_options = { :debug_info => true }

Presto，您可以在开发工具中访问Sass源：

点击开发工具中的行号可以编辑和应用本地更改：

就个人而言，我更喜欢将compass watch与LiveReload结合使用并在我的编辑器中进行编辑，但对于那些喜欢在浏览器中编辑的人，您现在可以直接编辑Sass文件。

在部署之前不要忘记编译为压缩。