如何在項(xiàng)目中使用sass,提高開發(fā)效率
首先，先學(xué)會(huì)sass的基本用法，可以從官方文檔中進(jìn)行學(xué)習(xí)，本文給出鏈接、不再贅述。
其次要合理搭建項(xiàng)目結(jié)構(gòu)。本文主要以我在項(xiàng)目中用到的sass來進(jìn)行講解。
最后要把sass文件編譯成css文件（瀏覽器不能解析sass語(yǔ)法）
1、在根目錄下新建scss文件夾和css文件夾
2、在scss文件夾下新建7個(gè)scss文件
采用模塊化思想，把css樣式主要分成6大類：
_variable.scss: sass變量，常用的顏色字體大小等
_function.scss：功能性的sass代碼，元素類名以f-開頭
_reset.scss：重置樣式
_unit.scss：最小元素樣式，元素類名以u(píng)-開頭
_module.scss：模塊樣式，元素類名以m-開頭
_grid.scss：布局樣式，元素類名以g-開頭
_style.scss: 把上面6個(gè)文件導(dǎo)入到這一個(gè)文件夾中，后面就只要編譯這一個(gè)文件即可。
在css文件夾中新建style.css文件，里面不需要寫css樣式，為后面編譯scss做準(zhǔn)備
文件目錄如下：
3、根據(jù)scss語(yǔ)法書寫樣式，把寫好的項(xiàng)目代碼（整個(gè)項(xiàng)目）導(dǎo)入到Koala軟件中，如下圖所示：
koala軟件下載鏈接附上：
4、點(diǎn)擊style.scss，右側(cè)抽屜打開，點(diǎn)擊compiledj進(jìn)行編譯，選擇目標(biāo)文件夾style.css（編譯好的css導(dǎo)入到事先創(chuàng)建的style.css文件中），編譯成功之后，可以點(diǎn)擊查看文件內(nèi)容。
當(dāng)然，你可以通過選擇Output Style選擇編譯的css樣式是什么格式的，nested(嵌套的)、expanded(展開的)等等。還可以通過Options中的Autoprefix為你的css代碼自動(dòng)添加瀏覽器前綴，省心省力。
總結(jié)：利用sass寫樣式 ，結(jié)構(gòu)清晰，代碼簡(jiǎn)潔，還方便復(fù)用樣式。再加上koala工具，一鍵編譯，使用不要太方便。
