利用sourcemap來調試sass

最近項目用上了sass,做爲css的預處理器，它可讓咱們用程序化的思惟書寫樣式，極大的簡化了css的開發，實在是前端居家旅行必備的利器。

咱們都知道，在項目中，樣式的頻繁調試是不可避免的，用上sass雖然說coding代碼量減小，但調試過程着實讓人崩潰。

看一段sass代碼：

嵌套書寫的結構在sass中常常會被用到。

編譯以後的樣式是這樣的：

在開發工具上咱們看到的是編譯後的文件，而非編譯前的源文件。

這個時候就產生一個問題了。在生產環境中，我但願看到的未經編譯文件的調試信息，而非編譯後的，由於這樣會極大的方便開發人員。就像上面的截圖，你能在scss文件下，快速定位到這些代碼的位置嗎？

~~~~~~~~~~~~~~~~~~~~~~~~無力吐槽的分割線~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

好在，sass在3.3.0以後版本提供了sourcemap功能。至於什麼是sourcemap,這裏有個連接你們能夠參考下。

http://code.tutsplus.com/tutorials/source-maps-101--net-29173

本人本地依賴 Ruby來編譯scss文件，若是你沒安裝Ruby，請自行安裝，相關教程能夠google......

若是你本地沒有安裝Ruby,只要裝有node.js和Grunt，一樣的，它們也能夠用來編譯scss文件.

本地裝有Ruby的同窗得首先肯定sass(3.3.0+)和compass是否已經安裝就緒。

命令行下運行：

gem list

若是沒有安裝這兩個包的同窗請執行：

gem install sass --pre
gem install compass --pre

若是是版本過於陳舊請執行：

gem update sass

~~~~~~~~~~~~~~~~~~~~我是傲嬌的分割線~~~~~~~~~~~~~~~~~~~~~

安裝好sass和compass後，咱們本地創建一個測試用的項目。

目錄結構以下：

sass目錄下有一個li.scss文件，咱們的任務就是把li.scss編譯到css目錄下，同時生成sourcemap文件。

獲取sass的相關用法能夠在命令行下輸入：

sass --help

進入項目根目錄，命令行下輸入：

sass --sourcemap --style compact --watch sass:css

這時sass目錄下的scss文件都處於被監聽的狀態，一旦文件被修改，便會及時編譯到css目錄下，同時生成相應的sourcemap文件。固然，編譯的同時，命令行下的窗口會輸出相應的信息，以便開發者調試。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~美麗不可方物的分割線~~~~~~~~~~~~~~~~~~~

到這一步，咱們已經成功生成了sourcemap文件，惋惜的是，在瀏覽器下查看，咱們仍未看到相對應的scss文件。

這是爲何呢？咱們擁有了souremap文件，卻缺乏了相應的解析工具。

Chrome是支持sourcemap的，但要使用該功能，咱們得首先開啓它。

開啓的步驟很簡單，我就不過多描述了，你們看下面的截圖就行了。哦，還有，推薦你們把chrome的版本升到33+，由於我不確保較低版本的chrome可否支持sourcemap。

「F12」，調出開發者工具，點擊以下圖標：

在彈出的面板裏，選擇：

重啓你的chrome。

回到頁面下，這個時候你就能夠看到sourcemap起做用了。

這個時候，若你想修改scss文件，根據行號即可以快速定位，很是方便。

~~~~~~~~~~~~~~~~~~我是寂寞的分割線~~~~~~~~~~~~~~~~~

這裏延伸一下。

許多同窗都喜歡用webstrome來編寫代碼，其實咱們利用其的File Watchers功能很方便就能編譯scss文件。

‘Ctrl+Alt+S’調出setting面板，搜索「file watchers」。

點擊「添加」按鈕

彈出以下面板：

這裏咱們重點填寫下面兩項：

Program:xxxxx     這裏填入你ruby安裝目錄下的scss.bat文件（windows系統下）

Arguments:xxx     這裏輸入的是編譯時的一些參數，我這裏輸入的是：

--no-cache --sourcemap --style compact $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

配置完這些選項，當咱們修改*.scss文件，文件就會自動編譯，特別方便。

~~~~~~~~~~~~~~~~~~~~~~~~~~~寫在最後的分割線~~~~~~~~~~~~~~~~~~~~~~~~~~~~

最後，謝謝你們。