看一段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是否已經安裝就緒。
命令行下運行：
1.
gem list
如果沒有安裝這兩個包的同學請執行：
1.
gem install sass --pre
2.
gem install compass --pre
如果是版本過於陳舊請執行：
1.
gem update sass
~~~~~~~~~~~~~~~~~~~~我是傲嬌的分割線~~~~~~~~~~~~~~~~~~~~~
安裝好sass和compass后，我們本地建立一個測試用的項目。
目錄結構如下：
sass目錄下有一個li.scss文件，我們的任務就是把li.scss編譯到css目錄下，同時生成sourcemap文件。
獲取sass的相關用法可以在命令行下輸入：
1.
sass --help
進入項目根目錄，命令行下輸入：
1.
sass --sourcemap --style compact --watch sass:css
這時sass目錄下的scss文件都處於被監聽的狀態，一旦文件被修改，便會及時編譯到css目錄下，同時生成相應的sourcemap文件。當然，編譯的同時，命令行下的窗口會輸出相應的信息，以便開發者調試。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~美麗不可方物的分割線~~~~~~~~~~~~~~~~~~~
到這一步，我們已經成功生成了sourcemap文件，可惜的是，在瀏覽器下查看，我們仍未看到相對應的scss文件。
這是為什么呢？我們擁有了souremap文件，卻缺少了相應的解析工具。
Chrome是支持sourcemap的，但要使用該功能，我們得首先開啟它。
開啟的步驟很簡單，我就不過多描述了，大家看下面的截圖就好了。哦，還有，推薦大家把chrome的版本升到33+，因為我不確保較低版本的chrome能否支持sourcemap。
“F12”，調出開發者工具，點擊如下圖標：
在彈出的面板里，選擇：
重啟你的chrome。
回到頁面下，這個時候你就可以看到sourcemap起作用了。
這個時候，若你想修改scss文件，根據行號便可以快速定位，非常方便。