首先Sass是一門CSS預(yù)處理語言，它擴展了CSS，有助于減少重復(fù)，節(jié)省時間。
Sass運行環(huán)境的搭建
Sass是ruby語言編寫的，但是兩者之間沒有什么語法關(guān)系，即使不會ruby，依然可以正常使用Sass，我們需要先安裝ruby，再安裝Sass。
首先安裝ruby，如果你使用的是ISO系統(tǒng)，那么你的系統(tǒng)已經(jīng)安裝好ruby了，如果你使用的是微軟的Windows系統(tǒng)，那么就需要我們自行安裝ruby。
安裝Ruby
步驟（1）:打開鏈接https://www.ruby-lang.org/en/downloads/，您將看到如示屏幕:
步驟（2）:接下來，運行安裝程序在系統(tǒng)上安裝Ruby。
隨便選擇一個安裝。當然要根據(jù)你的系統(tǒng)位數(shù)選擇！
步驟（3）:打開安裝包，出現(xiàn)如下圖，點擊OK
步驟（4）:我們最好選擇第一個選項? ( I accept the? License ) 點擊next
安裝完成后如下圖：
步驟（5）:安裝完成后檢查一下是否安裝成功
window+R 敲入cmd?
敲入ruby -v，安裝成成功后出現(xiàn)下圖：
步驟（6）:接下來，將Ruby bin文件夾添加到您的PATH用戶變量和系統(tǒng)變量以使用gem命令。
路徑用戶變量:
右鍵點擊我的電腦。
選擇屬性。
接下來，選擇高級標簽，然后點擊環(huán)境變量。
在環(huán)境變量窗口下，雙擊?PATH?，如屏幕所示。
您將得到一個編輯用戶變量框，如圖所示。在變量值字段中將ruby bin文件夾路徑添加為?C:\\ Ruby \\ bin 。如果路徑已經(jīng)為其他文件設(shè)置，則在其后放置分號，并添加Ruby文件夾路徑，如下所示。
點擊確定按鈕。
系統(tǒng)變量:
點擊新建按鈕。
接下來，會顯示新系統(tǒng)變量塊，如下所示。
在變量值字段中輸入?RubyOpt ，并在變量值字段中輸入?rubygems 。寫入變量名稱和值后，單擊確定按鈕。
Sass的安裝
ruby安裝包中集成了gem包管理工具，類似于nodejs下的npm，因此我們不需再下載gem，直接打開命令行來使用gem
sass安裝：有兩種方法，官方安裝和通過鏡像安裝
1）官方安裝：ruby安裝好后，它自帶的包管理工具gem也就安裝好了。直接打開命令行通過gem執(zhí)行sass安裝命令，再查看是否安裝成功：
gem install sass
Sass -v
2）通過鏡像安裝：比官方安裝方法多了2步：需要先移除默認的源，再添 加ruby china源，查看安裝成功之后，最后在執(zhí)行官方的安裝方法。
gem sources --remove https://rubygems.org（取消默認的綁定源）
gem sources --a https://gems.ruby-china.org（綁定國內(nèi)網(wǎng)站）
gem sources -l （驗證換源是否成功）
gem install sass
Sass -v
注：gem改源：放在rubygem.org上的資源文件位于國外站點，由于某些原因，在國內(nèi)訪問可能會出現(xiàn)連接失敗等問題，所以我們先把gem的連接源改到國內(nèi)的一些鏡像資源上
1 gem sources --remove https://rubygems.org（取消默認的綁定源）
2 gem sources --a https://gems.ruby-china.org（綁定國內(nèi)網(wǎng)站）
3 gem sources -l（驗證換源是否成功）
Sass的編譯
Sass編譯方法：sass編譯方式大概有三種通過命令行編譯（基礎(chǔ)方法）、GUI可視化圖形同居編譯及自動化編譯
?1）命令行編譯：就是在命令行中通過sass的命令設(shè)置及編譯
①單文件轉(zhuǎn)換命令：
????sass ?sass.scss? sass.css
??? #把名為sass的Sass文件轉(zhuǎn)化為CSS文件，每次更新保存會都要執(zhí)行這個命令
②單文件監(jiān)聽命令（添加--watch 命令）：
??? sass ?--watch ?sass.scss：sass.css
??? #‘--watch’參數(shù)加上之后，可以監(jiān)測style這個文件的變化，更新保存之后自動編譯
③多文件（文件夾）監(jiān)聽命令（添加--watch 命令）：
?????sass --watch sass/main:dist/css
?????#監(jiān)視sass目錄下main文件夾中的所有sass文件，并自動編譯為css文件之后，放到dist/css目錄下
④逆向操作：css文件轉(zhuǎn)換為sass/scss文件
????????sass-convert ?style.css ?style.sass
????????sass-convert ?style.css ?style.scss
2）GUI編譯工具
推薦Koala工具
3）自動化編譯
可以使用webstorm、sublime等編輯器的相關(guān)插件實現(xiàn)，也可以借助Gulp等自動化構(gòu)建工具來配置。這里推薦兩款sublime的插件：Sass(Sass語法高亮)和Sass Bulid(編譯)插件的使用也很簡單，編輯完文件后默認快捷鍵Ctrl + B即可編譯，會在當前目錄下生成同名css及css.map文件
