用chrome來映射查找樣式對應的sass

較新版本的sass(3.3+)支持source-map功能，能夠配合谷歌瀏覽器或者livestyle來映射查找對應的樣式。

要生成source-map能夠在grunt中使用 grunt-contrib-sass 插件，只要不在options中配置 ourcemap:'none' 便默認在編譯sass時自動生成匹配的.map文件：

下面是說說如何在谷歌中開啓映射sass文件的功能，也看成給本身寫一個備忘。

首先是在地址欄輸入 chrome://flags  進入實驗功能配置頁面，咱們找到 「啓用開發者工具實驗」 並點擊 「啓用」 連接：

而後重啓Chrome。打開開發者工具（ctrl+shit+I），點擊該欄右上方的齒輪圖標（setting按鈕）：

在Genneral選項卡上，確保勾選上了「Enable CSS source maps」便可：

稍舊一點的Chrome可能還須要到Experiments選項卡中勾選上「Support for Sass」，但新版的谷歌瀏覽器已經取消了這一項。

以後試試再用Chrome開發者工具檢測元素CSS樣式時，會發現它已經能順利幫你映射到對應的sass文件上了（即便你的css文件是壓縮的）：

 

完工~共勉~