Sass-如何使用Source Map

  1. 什麼是Source Map?
  2. 設定
  3. 個人想法
  4. 參考資源

什麼是Source Map?

sass從3.3版開始多出了這麼一個功能,時間就是金錢,能夠節省開發時間,你就可以做更多的事情,那Source Map的用處是什麼呢?

將資源做反射連結,讓你的讀取出來 source 可以跟原始文件做連結。

看到上面那句你一定心裡想"這是什麼鬼東西?",讓我們來情境描述一下:

原使情境(修改網頁時):

1. 用 chrome 的 DevTools 去檢查 html 元素
2. 透過旁邊的 style 視窗去編輯 .scss 檔
3. 修到滿意後,再把它複製貼上到我原本的 scss 或 css 檔裡面
4. 存檔
5. reload
6. 觀看結果

source map情境(修改網頁時):

1. 用 chrome 的 DevTools 去檢查 html 元素
2. 透過旁邊的 style 視窗去編輯 scss 或 css
3. 修到滿意後,直接在 Tools 上存檔(此時也一併修改到原始的 .scss 檔)
4. reload
5. 觀看結果

透過這個功能,可減少在 Browser DevTools 和 .scss 檔之間存檔消耗的時間。

設定

在建立前,先描述我的使用環境:

  1. MAC OSX
  2. Fire.app (sass 3.3.7 , compass 1.0.0.alpha.19)
  3. Sublime text 3
  4. chrome (版號:35.0.1916.114)

其他環境我沒試過,如果你願意嘗試後跟我分享我會很開心的XD~~~

第一步
更新你的sass版本到3.3以上

第二步
在 Fire.app 裡面的設定(change option)去勾選Enable Sourcemap,存檔,
重新 watch 一次專案,然後會看到 sass 產生 css 的地方會多出 xxxx.css.map
那個 map 檔是記錄你相關的路徑。

第三步
在預覽專案頁面的狀況下,開啟 chrome 的 DevTools ,右上角的設定(齒輪的圖案),
裡面有一個 General 分類, 確定 Enable CSS source mapsAuto-reload generated CSS
是勾選的狀態,回到頁面上重整,查看 Element 內的右方 Style ,檔案連結的部分就會變成原生 scss
點擊連結後會跳到 Source 類別裡面對應的 scss 檔案,直接做修改就可以後儲存,
就會直接幫你對應到原始的 scss 檔案上面。

注意:為什麼我點連結到 source 之後是空的? 往第四步看下去

第四步
我本身是使用 Fire.app 在寫 scss,他的 livereload 會讓 url 直接變成127.0.0.1:port號/頁面.html這樣的形式,
有可能造成了原本的解讀上差異,你會在 console 裡看到 類似下面的錯誤訊息:

ex:
GET http://127.0.0.1:9999/sass/main.scss 500 (Internal Server Error)
( 你的路徑和檔名會跟我不一樣 )

這時候,就要回到右上角的設定(齒輪的圖案)內, Workspace 去做設定,
Add Folders.... 去新增你這個專案資料夾,完成時再嘗試一次,如果還是不行,
就要選取剛剛新增的那列 Folders ,然後點選Edit....,在 Mapping 上新增,
依我的錯誤訊息為例,我針對URL PrefixFolder Path去做設定:

ex:
URL Prefix : http://127.0.0.1:9999/sass
Folder Path : /sass/

設定完後,回到頁面重整,就會發現剛剛的 Internal Server Error 沒了,
就可以回到第三步繼續操作。

個人想法

Source Map 跟 Emmet 作者後來發佈的 LiveStyle 有許多像似之處,目的都是在幫助開發者,在修改和存檔間節省不必要的複製、貼上的時間,但各自有不同的優缺點,我是覺得都還沒有成熟到非常好用。

SourceMap:

  1. 直接建立在原生 sass 上,但包刮 DevTools 的支援也時常在大修改,找了 chrome 教學就超多版本Orz......。
  2. 像 Fire.app 這種路徑跟原生的不一樣就掛了,之後應該是可以解決(交給他們這些高手了)。
  3. 修改必須跑到 Source 去修改,不是直接在在 Tools 上的 Style 修改後就直接過去。

LiveStyle

  1. 作者在套件介紹中,清楚說明不適合用在 scss,後續好像也沒看到相關更新,對於現在寫 scss 比較多的前端開發者來說,很難有吸引力。

上述,是我的使用後的感覺和比較,也可以參考這篇教學,還有圖片更好懂。
這個隨改隨存的趨勢應該是會在前端越來越明顯,就待這些高手再把它修改的更好囉XD~

參考資源

http://wcc723.github.io/sass/2014/06/02/sass-source-maps/
https://medium.com/what-i-learned-building/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0
http://www.w3cplus.com/tools/source-maps-101.html

Comments

comments powered by Disqus