sass用法總結

一、sass安裝

（1）移除原有的ruby源位址

gem sources --remove

（2）新增可用的ruby源位址

gem sources -a

（3）安裝sass

gem install sass

（4）sublime支援scss檔案高亮顯示

借助package control安裝sass外掛程式，之後set syntax為sass即可。

（5）防止sass中文注釋亂碼

後續寫.scss**過程中中文注釋會有亂碼的情況，找到engine.rb檔案（一般位於ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目錄下面），在所有的require後面新增如下**：

至此，sass環境部署完成

二、編繹sass檔案

1.切換到.scss檔案所在目錄

命令列下切換到**資料夾目錄（如z:\），假設有檔案test.scss檔案，裡面內容如下：（sass完全支援css語法）

h1h2

2.編譯scss檔案為css檔案執行命令：sass --style compressed test.scss test.css，即可生成壓縮版的css檔案，並且命名為test.css。幾點說明：

（1）--style 後面可以有四個引數可選，分別為

巢狀輸出方式 nested

展開輸出方式 expanded

緊湊輸出方式 compact

壓縮輸出方式 compressed

（2）test.scss和test.css檔案目錄可以自定義，例如把z盤sass目錄下的test.scss檔案編譯為壓縮版的檔案，並放置在z盤css目錄下，那麼命令即：sass --style compressed z:\sass\test.scss z:\css\test.css

（3）開發過程中，只需要修改scss檔案，然後編譯；前端頁面只需要引用相應的css檔案即可。

3.偵聽檔案和資料夾

在實際編譯過程中，你會發現上面的命令，只能一次性編譯。每次個性儲存「.scss」檔案之後，都得重新執行一次這樣的命令。如此操作太麻煩，其實還有一種方法，就是在編譯 sass 時，開啟「watch」功能，這樣只要你的**進行任保修改，都能自動監測到**的變化，並且給你直接編譯出來：

sass --watch 《要編譯的sass檔案路徑》/style.scss:《要輸出css檔案路徑》/style.css

watch 舉例：來看乙個簡單的示例，假設我本地有乙個專案，我要把專案中「bootstrap.scss」編譯出「bootstrap.css」檔案，並且將編譯出來的檔案放在「css」資料夾中，我就可以在我的命令終端中執行：

sass --watch

sass/bootstrap.scss:css/bootstrap.css