Sass與LESS讓人可以以類(lèi)似編程的方式書(shū)寫(xiě)CSS，讓我們有更好的方式管理CSS代碼。比如把一些功能函數(shù)抽出來(lái)，單獨(dú)放一個(gè)文件。頁(yè)面一般都含有一些公共模塊，把模塊也可以抽離出來(lái)單獨(dú)存放，等等。
很多同學(xué)都已經(jīng)開(kāi)始在項(xiàng)目使用less或sass，它們用起來(lái)確實(shí)是很爽，大大提高效率呀。
less & sass 都無(wú)法在瀏覽器中直接執(zhí)行，需要變成CSS。有時(shí)候想調(diào)試樣式，我們看到的行號(hào)是css代碼的行號(hào)，并不能直接對(duì)應(yīng)到less&sass文件中，修改起來(lái)總是不方便。
看到less&sass這么受歡迎，熱情的開(kāi)發(fā)者們給firefox開(kāi)發(fā)了一個(gè)插件 FireSass，后來(lái)chrome也跟上了，開(kāi)啟一個(gè)實(shí)驗(yàn)性功能支持sass調(diào)試。
具體設(shè)置如下：
編譯時(shí)添加參數(shù)：
sass開(kāi)啟debug-info選項(xiàng)：sass demo.sass demo.css –debug-info
less開(kāi)啟line-numbers：lessc demo.less demo.css –line-numbers=comments
這樣，編譯后的css中將包含調(diào)試信息：
瀏覽器設(shè)置：
firefox執(zhí)行安裝FireSass即可。
chorme：地址欄打開(kāi)chrome://flags/，啟用開(kāi)發(fā)者工具實(shí)驗(yàn) (Developer Tools experiments.)。重啟瀏覽器后，打開(kāi)開(kāi)發(fā)者工具的設(shè)置選項(xiàng)卡，Experiments -> Support for sass 勾選。
最終調(diào)試效果：
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
