在OSX上调试Chrome中的Sass

Question

我在OSX上，我希望能够使用new source maps feature在Chrome（或Canary）开发人员工具中调试Sass生成的CSS。我正在使用萨斯和指南针。

我已按照instructions获取Sass产品源地图文件。为了任何正在努力解决这个问题的人的利益，步骤是：

• 使用sudo gem install sass --pre
安装预发布版本的Sass
• 检查你的指南针版本 - 你需要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 Canary
• 转到chrome：// flags并启用“启用开发人员工具”设置 实验“
• 打开Web开发人员工具（功能-12），单击窗口右下角的齿轮 并在常规选项卡上勾选“启用源地图”和 实验标签勾选“支持Sass”。
• 重启金丝雀

但是，当我在Developer Tools中检查一个元素时，我只是得到了与粗糙的CSS文件相同的旧引用。我想看看元素的样式在SCSS文件中的起源。有人在Chrome OSX上，甚至FireSass都有运气吗？

Answer 1

对于那些当前预发布版本的SASS和指南针有问题的人：你并不孤单，有一个解决方法！

目前的预发布版本与指南针不兼容。您需要能够在没有错误的情况下运行命令'compass'，并且在安装了alpha版本162时，会出现LoadError。

而是使用以下命令安装版本141：

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

注意：您需要当前稳定版本的指南针，而不是预发行版。指南针的预发布版本似乎不适用于构建162 或 141.此外，您应该在预发布版本的sass之前安装指南针，因为指南针还将安装当前发布的版本sass。

希望有所帮助！

Answer 2

源地图确实可以在OSX Chrome中使用！我的开发环境中有几个样式表，我愚蠢地检查属于没有.css.map文件的样式表的样式。如果您按照上述步骤操作，这应该对您有用，甚至可能适用于当前版本的Chrome。