iT邦幫忙

DAY 24
1

Sass3.3 & CSS設計模式系列 第 25

Sass教學 (24) - Sass 3.3 Source Maps


影片教學請點選下圖連結↓

以下文章同步於Github

Sass 3.3新增的Source Maps主要功能就是讓瀏覽器能夠支援下圖效果:

透過上圖,就能知道該CSS程式碼是在哪一隻Sass檔的第幾行,
他的原理是當Sass編譯出CSS檔案後,
會再編譯出一個對應的.map檔,
如果你有開啟Source Map的設定,
你會發現編譯出來的CSS檔案最下面會有一行程式碼:

/*# sourceMappingURL=all.css.map */

網頁瀏覽器讀取到這行,就會找到對應map檔,
利用map裡面的資訊逆推去找對應的Sass程式碼,
所以.map也可以是說做為中間的溝通媒介,
接下來就來繼續講該如何開啟Sourcemap的設定。

步驟一 Chrome開啟Source maps的設定
這裡的範例是使用chrome,
首先開啟chrome dev tools後,
再找到齒輪icon,
進入Settings > General > Sources > Enable CSS source maps,
這樣就能讓瀏覽器支援Source Maps的功能,如下圖,

步驟二 在config.rb新增source maps設定
寫過Sass的開發者都知道,
根目錄會產生出一個config.rb的設定,
在裡面增加一行code,如下:

sourcemap = true

新增後,再重新watch開啟專案,
在html裡面寫個元素,再到Sass裡面寫對應html,
打開瀏覽器就能看到效果嘍!

除了能看到效果外,
chrome瀏覽器還能追蹤變數與@Mixin,
假設下圖我要尋找背景的變數顏色的話,
你就按住Command鍵,滑鼠滑到對應位置會顯示下底線,如下圖,

點進去後你就會發現他就跑到對應的變數去了,
是不是相當方便呢?

總結
如果你希望能在瀏覽器修改,就能同時修改本地端的檔案,
影片教學內有附上流程,再搭配此簡報,
這樣你就能透過瀏覽器來即時更新Sass資料嘍^_^


上一篇
Sass教學 (23) - Susy2學習摘要
下一篇
Sass教學 (25) - 如何透過Sublime text 3 plugin打造Sass開發環境
系列文
Sass3.3 & CSS設計模式46

尚未有邦友留言

立即登入留言