文章出處
文章列表
較新版本的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文件是壓縮的):
完工~共勉~
文章列表
全站熱搜