2

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

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

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

4

4 回答 4

1

没有办法按照您期望的方式执行此操作。

流程必须像下面这样工作->

编写 Compass/SCSS -> 刷新页面 -> 编辑 CSS 以获得结果 -> 使用上一步重新编辑 SCSS 和/或复制/粘贴。

因为它可以编译，所以我知道还没有解决方案可以将它重新连接到 SCSS 层。

于 2011-11-25T19:25:01.213 回答
0

代码包

Codekit是一款适用于 OSX 的优秀产品，它允许您编辑本地文件，并且当您点击保存时，它会自动将新编译的样式表注入您的浏览器，而无需刷新页面，因此它至少可以为您节省这一步。但是，到目前为止，还没有我知道的 Windows 对应项。

我最近在一个非常大的项目中使用了 Codekit，我们正在使用 SCSS，它确实很有帮助。虽然可悲的是，像你一样，我已经习惯了“编辑 CSS”Web 开发人员工具栏的工作流程，而且我还没有找到与 SASS 世界的准确翻译。

网络腻子

另一个具有一定潜力（但有一些严重缺点）的选项是 Fog Creek 的一个开源框架，称为Web Putty。这是他们提供的一项服务，允许您在浏览器中实时编辑 CSS，包括 SASS 和 SCSS 风格的 CSS，但他们停止了该服务并简单地开源了该软件，因此设置它完全取决于您并且需要相当多的努力（THATs缺点）。

于 2012-08-28T13:33:03.543 回答
0

我认为这与您现在所做的不会有太大不同。

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

于 2011-05-31T20:06:28.360 回答
0

现在可以通过 Chrome 开发工具中对 Sass 的实验性支持来实现。

首先启用对 Sass 的支持：

对 Sass 的 Chrome 实验性支持

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

sass_options = { :debug_info => true }

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

Chrome 中的 Sass 源映射

单击开发工具中的行号将允许您编辑和应用本地更改：

在此处输入图像描述

就个人而言，我更喜欢在我的编辑器compass watch中与LiveReload和编辑一起使用，但对于那些喜欢在浏览器中编辑的人，你现在可以直接编辑 Sass 文件。

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

于 2013-02-21T05:32:04.033 回答