ruby環境中自動編譯sass教程_ruby專題

sass為CSS的賦予了動態語言的特性，如變數、繼承、運算、函數等，更方便CSS的編寫和維護!

sass安裝

因為sass依賴於ruby環境，所以裝sass之前先確認裝了ruby。安裝ruby http://www.jb51.net/article/61501.htm

安裝完ruby之後，在開始菜單中，找到剛才我們安裝的ruby，開啟Start Command Prompt with Ruby

然後直接在命令列中輸入

複製代碼 代碼如下:

gem install sass

按斷行符號鍵確認，等待一段時間就會提示你sass安裝成功。

命令檢測安裝是夠完成：

如果要安裝beta版本的，可以在命令列中輸入

複製代碼 代碼如下:

gem install sass --pre

使用sass

SASS檔案就是普通的文字檔，裡面可以直接使用CSS文法。檔案尾碼名是.scss，意思為Sassy CSS。

下面的命令，可以在螢幕上顯示.scss檔案轉化的css代碼。（假設檔案名稱為test。）

複製代碼 代碼如下:

sass test.scss

如果要將顯示結果儲存成檔案，後面再跟一個.css檔案名稱。

複製代碼 代碼如下:

sass test.scss test.css

SASS提供四個編譯風格的選項：

複製代碼 代碼如下:

* nested：嵌套縮排的css代碼，它是預設值。
* expanded：沒有縮排的、擴充的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮後的css代碼。

生產環境當中，一般使用最後一個選項。

複製代碼 代碼如下:

sass --style compressed test.sass test.css

你也可以讓SASS監聽某個檔案或目錄，一旦源檔案有變動，就自動產生編譯後的版本。

複製代碼 代碼如下:

// 監聽檔案
sass --watch input.scss:output.css
// 監聽檔案夾
sass --watch app/sass:public/stylesheets