css - 在 OSX 上的 Chrome 中调试 Sass

Question

我在 OSX 上，我希望能够使用 new source maps feature 在 Chrome(或 Canary)开发人员工具中调试 Sass 生成的 CSS .我正在使用 Sass 和 Compass。

我关注了 instructions让 Sass 生成源映射文件。为了其他任何为此苦苦挣扎的人的利益，步骤是:

• 使用 sudo gem install sass --pre
安装 Sass 的预发布版本
• 检查您的 Compass 版本 - 您需要 12.2，而不是 13 alpha。如果您需要卸载它，您可以使用 sudo gem uninstall compass --version 0.13.alpha.2 来完成。
• 将此添加到您的 config.rb 文件 sass_options = {:sourcemap => true}。
• 转到包含 config.rb 的文件夹并运行 sass --compass --sourcemap --watch scss:css(这告诉 Sass 将 scss 文件夹中的文件编译为 CSS 文件css 文件夹)。

如果一切正常，当您对我们的一个 scss 文件(比如 styles.scss)进行更改时，Sass 将编译一个新的 CSS 文件——同时它会创建一个名为 styles.css.map 的文件其中包含映射信息，当您在开发人员工具中选择一个元素时，应该允许 Chrome 将您指向源 SCSS 文件。

我已经成功地让我的 Sass 生成了这个文件。但不幸的是，Chrome 拒绝对其进行任何操作。我已经完成了似乎是推荐的步骤:

• 安装 Chrome 金丝雀
• 转到 chrome://flags 并启用设置“启用开发人员工具实验”
• 打开 Web 开发人员工具(Function-12)，点击窗口右下角的齿轮在“常规”选项卡上勾选“启用源映射”，然后在实验选项卡勾选“Sass 支持”。
• 重启金丝雀

但是当我在开发人员工具中检查一个元素时，我只是得到了对糟糕的 CSS 文件的相同旧引用。我想查看元素样式在 SCSS 文件中的来源。有没有人在 Chrome OSX 或 FireSass 上遇到过这个问题？

Answer 1

对于那些在 SASS 和 compass 的当前预发布版本中遇到问题的人:你不是唯一的，并且有一个解决方法!

当前的预发布版本与指南针不兼容。您需要能够无错误地运行命令“compass”，并且当您安装了 alpha 版本 162 时，您会收到 LoadError。

相反，使用以下命令安装版本 141:

gem install sass -v 3.3.0.alpha.141 --pre

注意:您需要当前稳定版的指南针，而不是预发布版。 compass 的预发布版本似乎不适用于 build 162 或 141。此外，您应该在 sass 的预发布版本之前安装 compass，因为 compass 也会安装当前发布的版本萨斯。

希望对您有所帮助!