文章出處

較新版本的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文件是壓縮的):

 

完工~共勉~


文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()