最近項目用上了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文件，文件就會自動編譯，特別方便。
~~~~~~~~~~~~~~~~~~~~~~~~~~~寫在最后的分割線~~~~~~~~~~~~~~~~~~~~~~~~~~~~
最后，謝謝大家。