在瀏覽器頁面有時看到sass文件而不是css文件問題，其主要由於sass開啟了source-map(調試)功能，問題如下圖：
sass調試
sass調試需要開啟編譯時輸出調試信息和瀏覽器調試功能，兩者缺一不可。
開啟編譯調試信息
目前sass的調試分為兩種，一種為開啟debug-info，一種為開啟sourcemap（這個將成為主流）。
如開啟的是debug-info，則解析的css文件中會有以@media -sass-debug-info開頭的代碼，如沒有則表明沒有開啟。
如開啟的是sourcemap，則在解析的css文件同目錄下生成一個.css.map的后綴名文件。
命令行開啟
兩個的命令分別為--debug-info，--sourcemap，開啟如下：
1 sass --watch style.scss:style.css --debug-info 2 sass --watch style.scss:style.css --sourcemap
koala開啟
有關koala的使用請點擊這個http://koala-app.com/index-zh.html
如下圖：點擊相應的文件，然后就會出現右邊的編譯選項，即可選擇是否開啟source map，debug info
開啟瀏覽器調試
谷歌瀏覽器調試
F12打開調試面板，點擊調試面板右上角的齒輪圖標打開設置，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。
開啟--sourcemap編譯，f12打開調試面板，就可以看到原先右邊的css文件變成了我們現在的scss文件
點擊scss文件，會跳到source里面的scss源文件，現在可以在里面進行修改，修改完成后可以右鍵選擇save或save as命令，然后替換我們本地的scss源文件，刷新chrome就可以看到變化（注意，解析樣式需要一定時間）。以后只要ctrl+s保存修改就可以在瀏覽器中看到修改效果了。
火狐瀏覽器調試
debug-info調試
firefox可以安裝插件FireSass使用debug-info來調試。
開啟--debug-info編譯，f12打開firebug，就可以看到原先右邊的css文件變成了我們現在的scss文件
sourcemap調試
firefox 29 將會開始支持sourcemap，注意是火狐自帶的調試功能，而不是firebug。
開啟--sourcemap編譯，右鍵“查看元素”采用火狐自帶的調試功能，打開調試面板，在樣式上右鍵選擇“顯示原始來源”。
點擊scss文件，這樣就跳到了scss文件。如下圖：
然后就可以進行我們的修改了，修改之后點擊保存或者'ctrl+s'彈出我們要保存到哪里，同谷歌一樣直接覆蓋到我們本地的源文件就ok了。
有時用29 beta版本的時候這個功能不太穩定，估計到穩定版本應該就好了。同時期待FireSass這個插件升級支持sourcemap。