在OSX上的Chrome中調試Sass

我在OSX上，我希望能夠使用描述爲here的新源地圖功能在Chrome（或Canary）開發人員工具中調試Sass生成的CSS。我正在使用Sass和Compass。在OSX上的Chrome中調試Sass

我按照好的指示here來獲得Sass產品的源地圖文件。對於別人的誰與此掙扎的權益，其步驟是：

與sudo gem install sass --pre
安裝薩斯的預發佈版本，請檢查您的指南針版本 - 你需要12.2，而不是13阿爾法。如果你需要卸載它，你可以使用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），薩斯會編一個新的CSS文件的一個做出改變 - 在同一時間，它會創建一個名爲樣式文件。包含映射信息的css.map，當您在Developer Tools中選擇一個元素時，該映射信息應允許Chrome指向源SCSS文件。

我已經成功地讓我的Sass產生這個文件。但遺憾的是Chrome拒絕採取任何措施。我所做的一切似乎是推薦步驟：

但是，當我在開發者工具檢查元素我只是得到同樣的老參考蹩腳的CSS文件。我想查看元素的樣式在SCSS文件中的起源。有沒有人在Chrome OSX或者FireSass上有過這樣的運氣？

您應該保留原樣的問題，並將您的編輯作爲答案。回答你自己的問題完全可以:-)。否則，它會停留在「未解答的問題」池中。 – cimmanon

呃我的問題類型變成了一個不同的問題 - 我得到了Sass來創建源映射文件，但我仍然無法在Developer Tools中看到對SCSS文件的引用。 –

您是否嘗試過裸露的Sass手錶模式，如https://code.google.com/p/chromium/issues/detail?id=176807#c8所述？ –

源地圖確實可以在OSX Chrome中使用！我在我的開發環境中有幾個樣式表，我愚蠢地檢查屬於沒有.css.map文件的樣式表的樣式。如果您按照上述步驟進行操作，則可能適用於您，甚至可能使用當前版本的Chrome。

2013-04-18 11:24:24

對於目前SASS和指南針的預發佈版本有問題的人來說：你並不孤單，有一種解決方法！

目前的預發佈版本是不兼容與指南針。你需要能夠在沒有錯誤的情況下運行命令'compass'，並且當你安裝了alpha版本162時，你會得到LoadError。

相反，安裝版本141以下命令：

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

注意：您需要羅盤的當前穩定版本，而不是預發佈。指南針的預發佈版本似乎不適用於構建162 或 141.此外，您應該在預發佈版本的sass之前安裝指南針，因爲指南針也將安裝當前發佈的sass版本。

希望有幫助！

2013-06-02 14:05:44

回答