在OSX上使用Chrome调试Sass

Question

我在使用OSX操作系统，希望能够使用新的源映射功能在Chrome（或Canary）开发者工具中调试Sass生成的CSS。我正在使用Sass和Compass。

我已经按照说明书生成了源映射文件。为了帮助其他遇到问题的人，这些步骤如下：

• 使用sudo gem install sass --pre安装Sass的预发布版本。
• 检查您的Compass版本 - 您需要12.2而不是13 alpha。如果您需要卸载它，可以使用sudo gem uninstall compass --version 0.13.alpha.2进行卸载。
• 将sass_options = {:sourcemap => true}添加到您的config.rb文件中。
• 转到包含您的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开发者工具（F12），点击窗口右下角的齿轮，在常规选项卡中勾选“启用源映射”，在实验选项卡中勾选“支持Sass”。
• 重启Canary

但是当我在开发者工具中检查元素时，只会得到指向糟糕CSS文件的老引用。我想看看元素样式在SCSS文件中的来源。有人在Chrome OSX上或甚至使用FireSass成功吗？

- And Finally

---

你应该把问题保留原样，将编辑内容作为答案发布。自己回答自己的问题是完全可以的 :-). 否则它会一直留在“未回答的问题”池中。 - cimmanon

它在Windows上无法工作。即使我已经按照所有步骤进行了操作。 - dev.meghraj

梅格拉吉，哪一部分出了问题——源映射的生成还是在Chrome开发者工具中显示它们？您是否在CSS文件夹中看到类似style.css.map这样的文件名？ - And Finally

嗯...这有点棘手，你必须做对很多事情 - 我一开始也遇到了麻烦，但后来解决了。如果你的CSS文件夹中有css.map文件，我建议尝试使用Chrome Canary版本，并在Chrome选项中设置上述两个设置。 - And Finally

得到了这个提示...小贴士：不要同时使用sass sourcemap和LiveReload-sublimetext2插件 :) - Denis

Answer 1

对于那些在使用当前SASS和compass预发布版本时遇到问题的人：你并不孤单，有一个解决方法！

当前预发布版本与compass 不兼容。您需要能够无错误地运行命令“compass”，而当您安装Alpha版本162时，会出现LoadError。

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

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

注意: 您需要当前稳定版本的compass，而不是预发布版。compass的预发布版本似乎不能与构建162或141一起使用。此外，在安装Sass的预发布版本之前应该先安装compass，因为compass还将安装当前发布的Sass版本。

希望这可以帮助您！

- Peter Miller

Answer 2

源代码映射在OSX Chrome中确实可以使用！在我的开发环境中有几个样式表，我愚蠢地检查了属于一个尚未拥有.css.map文件的样式表的样式。如果您按照上述步骤操作，则应该可以在Chrome的当前版本中使用。

- And Finally