SASS的幾種編譯方式

 本文主要介紹SASS的幾種編譯方式

   簡要：SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝ruby（http://www.ruby-lang.org/zh_cn/downloads/）而後再安裝SASS。

假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：

   gem install sass

而後,就能夠使用了。

 1、命令行方式

SASS文件就是普通的文本文件，裏面能夠直接使用CSS語法。文件後綴名是.scss，意思爲Sassy CSS。

下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲nav。）

 

   

而後打開命令行  輸入  sass nav.scss nav.css  便可將nav.scss 編譯成 nav.css

  

 

 

此外 SASS提供四個編譯風格的選項:

　　* nested：嵌套縮進的css代碼，它是默認值。

　　* expanded：沒有縮進的、擴展的css代碼。

　　* compact：簡潔格式的css代碼。

　　* compressed：壓縮後的css代碼。

生產環境當中，通常使用壓縮選項。

　　sass --style compressed nav.sass nav.css

 

也能夠讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。

sass --watch nav.scss:nav.css

 

2、軟件方式編譯（Koala)

軟件地址（https://github.com/oklai/koala/releases/）

 

 

 

 

下載安裝好軟件後把scss 文件導入軟件後便可執行編譯;

　

 

 

3、在webstorm中配置sass的自動編譯（較實用方便）

 

 

 點擊左上角的File-->Settings--> File Watchers

在彈窗的右上角點擊綠色的「+」號，而後選擇SCSS;

 

 

Arguments:

能夠配置編譯後的文件的輸出路徑,我這裏寫的是:

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

(編譯後的 nav.css 存放路徑)

Output paths to refresh:

改爲這樣:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

(編譯後的 nav.css.map 存放路徑)

 

文中nav.scss:    https://github.com/Thinkia/SASS/blob/master/Test/tModel-P/sass/nav.scss

SASS更多用法：阮一峯SASS用法指南http://www.ruanyifeng.com/blog/2012/06/sass.html