一、安裝
1、如果你的系統是max osx ，只需要一步
在所有菜單中找到終端 ,考慮到權限問題，我在命令行前加上sudo,回車后鍵入密碼
sudo gem install sass
2、如果你的系統是 window，需要兩步
- 1、安裝ruby，因為sass依賴于ruby環境，so先到官網下載個ruby （http://rubyinstaller.org/downloads）
注意一點： 在安裝的時候，請勾選Add Ruby executables to your PATH（如下圖）這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到ruby環境。
- 2、好，現在假設你已經成功安裝了ruby， 在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby
輸入：gem install sass
注意：
這里有可能安裝沒反應或提示網絡錯誤什么的。解決辦法是使用淘寶的Ruby gem鏡像：
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 請確保只有 ruby.taobao.org
$ gem install sass
二、webstorm下設置sass（webstorm可以自動編譯sass噢）
1、打開Webstorm的設置界面，然后搜索File Watcher；
2、點擊＋號，選擇scss或sass
3、
4、修改上圖中的Arguments為：
--no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css
5、修改上圖中的Output paths to refresh為：
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
到這里，你就完成了webstorm下設置sass自動編譯了
三、命令編譯
除了webstorm能夠編譯sass，還可以使用命令編譯，這種編譯方式是最直接也是最簡單的一種方式。因為只需要在你的命令終端輸入
1、一次性編譯
- 單文件編譯
sass <要編譯的sass文件路徑>/style.scss:<要輸出的css文件路徑>/style.css
- 多文件編譯
sass sass/:css/
//上面的命令表示將項目中“sass”文件夾中
//所有“.scss”(“.sass”)文件編譯成“.css”文件
//并且將這些 CSS 文件都放在項目中“css”文件夾中。
2、開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，并且給你直接編譯出來（相當于設置webstorm自動編譯sass）
sass --watch <要編譯的sass文件路徑>/style.scss:<要輸出css文件路徑>/style.css
四、sass不同樣式風格的輸出方法
sass --watch test.scss:test.css --style (nested/expanded/compact/compressed)
- 嵌套輸出方式 nested（不建議）
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
- 展開輸出方式 expanded
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
- 緊湊輸出方式 compact
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
- 壓縮輸出方式 compressed
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}
五、常見編譯錯誤
1、字符編譯引起的
在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置為“utf-8”。
2、路徑中的中文字符引起的
建議在項目中文件命名或者文件目錄命名不要使用中文字符
六、Sass調試
使用 Sass 的程序媛都希望能在瀏覽器中直接調試 Sass 文件，找到對應的行數。哈哈，這個so easy! 只要你的瀏覽器支持“sourcemap”功能即可,實操看下圖，如果圖片顯示不出來，可以點擊http://img.mukewang.com/54f7b71d0001bb0b05050268.jpg
七、Sass與SCSS的區別
不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和文件擴展名不同
假設我們有這樣的一段css代碼
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
1、SCSS 語法格式編寫
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
2、Sass 語法格式編寫
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
注意：
“.sass”只能使用 Sass 老語法規則（縮進規則－通過 tab 鍵控制縮進的一種語法規則），“.scss”使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（類似 CSS 語法格式）
個人更加青睞SCSS
