關(guān)于sass，就不想多說什么了。只要你有css基礎(chǔ)，十分鐘入門好嗎?？梢詤⒖枷沦Y料：http://www./sassguide/

今天想說的是webStorm下如何實(shí)現(xiàn)sass自動(dòng)編譯。

最近在學(xué)習(xí)SASS，研究了下編譯的方法，現(xiàn)在大家一般用的有兩種，一種是直接用命令行編譯，另一種就是利用一些方便的編譯工具，例如騰訊的koala。后來我發(fā)現(xiàn)，原來webstorm早就支持了sass編譯  - - 真是貼心啊。。。。

廢話不多說，直接去webstorm配置去。

打開settings，可以看到Tools下面有個(gè)file watchers選項(xiàng)，點(diǎn)進(jìn)去如下圖

右邊顯示的就是現(xiàn)在監(jiān)視的實(shí)時(shí)編譯文件配置，SCSS和SCSS-min就是我配置的。

點(diǎn)擊加號(hào)，選擇SCSS或者SASS(根據(jù)自己寫的格式，SCSS是最新版的SASS后綴)，我們這里選擇是SCSS，進(jìn)入配置界面

Name和Description就不用多介紹了，Options我們暫時(shí)也不用管（其實(shí)是我也不懂啥意思。。。）

File type就是我們需要監(jiān)視的文件類型，這里當(dāng)然是SCSS

Scope監(jiān)視范圍可以選擇不同監(jiān)視范圍，這樣就可以設(shè)置多個(gè)監(jiān)視配置，輸出對(duì)應(yīng)不同的目錄或者module下的SCSS文件。

Programe是scss編譯工具的目錄地址，因?yàn)镾ASS是依賴ruby的，所以我們還需要去安裝ruby，ruby在window下的安裝文件下載可以在   http:///downloads/   網(wǎng)站找到，我這里下的193。其他環(huán)境的可以去官網(wǎng)下載：https://www./

win環(huán)境的安裝很傻瓜，一路next就行了，不過記得在選擇目錄的時(shí)候，有個(gè)add to PATH選項(xiàng)一定要勾上，這樣就不用我們手動(dòng)配置環(huán)境變量了。其他環(huán)境的沒有安裝過，百度吧。。。。

安裝好ruby以后，打開cmd，輸入gem install sass就可以安裝SASS了，但是由于gem的默認(rèn)原地址由于國內(nèi)偉大的GFW原因可能連接不上導(dǎo)致無法安裝，所以我們還需要替換一下。

依次輸入：

gem sources –r http:///

gem sources –a http://ruby./

gem sources –l

如果我們看到最后顯示的地址只有國內(nèi)淘寶提供的鏡像地址就OK了

然后再輸入gem install sass就可以了，完成后輸入sass –v 就會(huì)返回sass的版本號(hào)。

OK以后，在webstorm里面選擇本機(jī)ruby目錄下bin目錄里面的scss.bat文件（如果需要編譯SASS文件則選擇sass.bat）

下面的輸出參數(shù)，可以根據(jù)自己的需要填寫，下面列出的是一些常用的參數(shù)

• --style表示解析后的css是什么格式，如：--style compressed，有四種取值分別為：nested，expanded，compact，compressed.
• --sourcemap表示開啟sourcemap調(diào)試。開啟sourcemap調(diào)試后，會(huì)生成一個(gè)后綴名為.css.map文件。 webstorm是默認(rèn)開啟sourcemap的，所以可以不填寫
• --debug-info表示開啟debug信息，升級(jí)到3.3.0之后因?yàn)閟ourcemap更高級(jí)，這個(gè)debug-info就不太用了。

下面是四種格式編譯后的樣式：

后面就是輸出的目錄地址和文件名，目錄是相對(duì)于源文件的，點(diǎn)擊Insert macro可以看到一些變量。默認(rèn)的話是在源文件下輸出CSS文件。

配置完畢后，點(diǎn)擊OK就完成了。

然后我們新建個(gè)SCSS文件，輸入內(nèi)容就可以看到結(jié)果了

可以看到，我輸入內(nèi)容后，直接在源文件下生成了一個(gè)css文件和一個(gè)map文件。

這樣就代表編譯成功了，現(xiàn)在就可以開始我們編寫我們的SASS項(xiàng)目了，就不用在考慮編譯問題了。