關於sass，就不想多說什么了。只要你有css基礎，十分鍾入門好嗎。可以參考下資料：http://www.w3cplus.com/sassguide/
今天想說的是webStorm下如何實現sass自動編譯。
最近在學習SASS，研究了下編譯的方法，現在大家一般用的有兩種，一種是直接用命令行編譯，另一種就是利用一些方便的編譯工具，例如騰訊的koala。后來我發現，原來webstorm早就支持了sass編譯 - - 真是貼心啊。。。。
廢話不多說，直接去webstorm配置去。
打開settings，可以看到Tools下面有個file watchers選項，點進去如下圖
右邊顯示的就是現在監視的實時編譯文件配置，SCSS和SCSS-min就是我配置的。
點擊加號，選擇SCSS或者SASS(根據自己寫的格式，SCSS是最新版的SASS后綴)，我們這里選擇是SCSS，進入配置界面
Name和Description就不用多介紹了，Options我們暫時也不用管（其實是我也不懂啥意思。。。）
File type就是我們需要監視的文件類型，這里當然是SCSS
Scope監視范圍可以選擇不同監視范圍，這樣就可以設置多個監視配置，輸出對應不同的目錄或者module下的SCSS文件。
Programe是scss編譯工具的目錄地址，因為SASS是依賴ruby的，所以我們還需要去安裝ruby，ruby在window下的安裝文件下載可以在 http://rubyinstaller.org/downloads/ 網站找到，我這里下的193。其他環境的可以去官網下載：https://www.ruby-lang.org/
win環境的安裝很傻瓜，一路next就行了，不過記得在選擇目錄的時候，有個add to PATH選項一定要勾上，這樣就不用我們手動配置環境變量了。其他環境的沒有安裝過，百度吧。。。。
安裝好ruby以后，打開cmd，輸入gem install sass就可以安裝SASS了，但是由於gem的默認原地址由於國內偉大的GFW原因可能連接不上導致無法安裝，所以我們還需要替換一下。
依次輸入：
gem sources –r http://rubygems.org/
gem sources –a http://ruby.taobao.org/
gem sources –l
如果我們看到最后顯示的地址只有國內淘寶提供的鏡像地址就OK了
然后再輸入gem install sass就可以了，完成后輸入sass –v 就會返回sass的版本號。
OK以后，在webstorm里面選擇本機ruby目錄下bin目錄里面的scss.bat文件（如果需要編譯SASS文件則選擇sass.bat）
下面的輸出參數，可以根據自己的需要填寫，下面列出的是一些常用的參數
--style表示解析后的css是什么格式，如：--style有四種取值分別為：compressed，nested，expanded，compact，compressed.--sourcemap表示開啟sourcemap調試。開啟sourcemap調試后，會生成一個后綴名為.css.map文件。 webstorm是默認開啟sourcemap的，所以可以不填寫--debug-info表示開啟debug信息，升級到3.3.0之后因為sourcemap更高級，這個debug-info就不太用了。
下面是四種格式編譯后的樣式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
// nested
#main {
color
:
#fff
;
background-color
:
#000
; }
#main p {
width
:
10em
; }
.huge {
font-size
:
10em
;
font-weight
:
bold
;
text-decoration
:
underline
; }
//
expanded
#main {
color
:
#fff
;
background-color
:
#000
;
}
#main p {
width
:
10em
;
}
.huge {
font-size
:
10em
;
font-weight
:
bold
;
text-decoration
:
underline
;
}
//
compact
#main {
color
:
#fff
;
background-color
:
#000
; }
#main p {
width
:
10em
; }
.huge {
font-size
:
10em
;
font-weight
:
bold
;
text-decoration
:
underline
; }
// compressed
#main{
color
:
#fff
;
background-color
:
#000
}#main p{
width
:
10em
}.huge{
font-size
:
10em
;
font-weight
:
bold
;
text-decoration
:
underline
}
|
后面就是輸出的目錄地址和文件名，目錄是相對於源文件的，點擊Insert macro可以看到一些變量。默認的話是在源文件下輸出CSS文件。
配置完畢后，點擊OK就完成了。
然后我們新建個SCSS文件，輸入內容就可以看到結果了
可以看到，我輸入內容后，直接在源文件下生成了一個css文件和一個map文件。
這樣就代表編譯成功了，現在就可以開始我們編寫我們的SASS項目了，就不用在考慮編譯問題了。