Sass是是一種基于ruby編寫的CSS預(yù)處理器，誕生于2007年，是最早也是最成熟的一款CSS預(yù)處理器語言，它可以使用變量、嵌套、混入、繼承，運算，函數(shù)等功能，使得CSS的開發(fā)，變得簡單清晰可維護(hù)，同時也大大節(jié)省了設(shè)計者的時間，提高了效率。Sass最后還是會編譯出合法的CSS讓瀏覽器使用，也就是說它本身的語法并不太容易讓瀏覽器識別，因為它不是標(biāo)準(zhǔn)的CSS格式，在它的語法內(nèi)部可以使用動態(tài)變量等，所以它更像一種極簡單的動態(tài)語言。
如今Sass有兩套語法規(guī)則：一種縮進(jìn)作為分隔符來區(qū)分代碼塊；另一種借鑒了less的一些思想，使用大括號（｛｝）作為分隔符。后一種語法規(guī)則又名SCSS，在Sass3之后的版本都支持這種語法規(guī)則。
SASS依賴于ruby環(huán)境，所以裝SASS之前先確認(rèn)裝了ruby,在官網(wǎng)下載個ruby
安裝時請勾選Add Ruby executables to your PATH這個選項，添加環(huán)境變量，不然以后使用編譯軟件的時候會提示找不到ruby環(huán)境
安裝完ruby之后，在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby
1.命令行：
gem install sass
按回車鍵確認(rèn)，等待一段時間就會提示你sass安裝成功。
2.安裝beta版本，命令行：
gem install sass –pre
3.從sass的Git repository來安裝，git的命令行為:
git clone git://github.com/nex3/sass.git
cd sass
rake install
1.koala編譯
koala是一款免費的編譯器，具有界面簡潔，操作方便的特點。
2.命令行編譯
單文件轉(zhuǎn)換命令 ：
sass index.scss index.css
單文件監(jiān)聽命令：
sass –watch index.scss:index.css
文件夾監(jiān)聽命令：
sass –watch sassFileDirectory:cssFileDirectory
1.導(dǎo)入：
sass的導(dǎo)入(@import)規(guī)則和CSS的有所不同：
a)sass中導(dǎo)入.css文件(@import common.css),和CSS文件中導(dǎo)入@import common.css文件效果相同。
b)sass中導(dǎo)入.scss后綴文件，可以省略后綴名
2.注釋：
sass有兩種注釋方式：
a)css方式： /*……*/
在/*后面加一個感嘆號，表示這是”重要注釋”。即使是壓縮模式編譯，也會保留這行注釋，通?？梢杂糜诼暶靼鏅?quán)信息。
b)單行注釋：//，此種注釋不會被編譯出來
3.變量：
SASS允許使用變量，所有變量以$開頭。
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中，如：
$left : leftdiv{border-#{$left}-radius:10px;} 4.計算：
SASS允許在代碼中使用算式,如：
5.嵌套：
a)SASS允許選擇器嵌套，如
div ul{color:#f00;}
可以寫成：
b)屬性也可以嵌套，如div{border-color:#f00;}可以寫成：
div{border:{color:#f00;}}
注意，border后面必須加上冒號。
c)在嵌套的代碼塊內(nèi)，可以使用$引用父元素。比如a:hover偽類，可以寫成：
6.混合：
1)Mixin有點像C語言的宏（macro），是可以重用的代碼塊。
使用@mixin命令，定義一個代碼塊，如：
@mixin fl{float:left;}
使用@include重用
2)mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值，如：
@mixin fl($value : 10px){float:left;margin-right:$value;}div{@include fl(20px);}
3)生成瀏覽器前綴
調(diào)用：
#ul li{@include setRadius(left,right);}#ol li{@include setRadius(top,bottom,20px);}
7.繼承：
SASS允許一個選擇器，繼承另一個選擇器。如現(xiàn)有
class2繼承class1:
.class2{@extend .class1;//注意此處的點font-size:18px;}
用compact輸出方式編譯后為：
8.顏色函數(shù)：
SASS提供了一些內(nèi)置的顏色函數(shù)，以便生成系列顏色：
1)lighten:通過改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個新的顏色；
lighten(#cc3, 10%) // #d6d65c
2)darken:通過改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個新的顏色；
darken(#cc3, 10%) // #a3a329
3)grayscale:將一個顏色變成灰色，相當(dāng)于desaturate($color,100%)
grayscale(#cc3) // #808080
4)complement:返回一個補(bǔ)充色，相當(dāng)于adjust-hue($color,180deg);
complement(#cc3) // #33c
更多顏色函數(shù)參見： http://www.w3cplus.com/preprocessor/sass-color-function.html 或官網(wǎng)
9.條件語句：
div{@if 3 < 5 {border:1px solid #f00;}@if 3 > 5 {border:1px solid #00f;}}div{@if 3 < 5{border-raduis:5px;}@else {border-raduis:10px;}}compact方式編譯后：div { border: 1px solid #f00; }div { border-raduis: 5px; }
10.循環(huán)語句：
1)for循環(huán)
2)while循環(huán)
$i:0@while $i < 5{.class_#{$i}{border:#{$i}px solid #f00;}}編譯后：.class_0 { border: 0px solid red; }.class_1 { border: 1px solid red; }.class_2 { border: 2px solid red; }.class_3 { border: 3px solid red; }.class_4 { border: 4px solid red; }
3)each
11.自定義函數(shù)：
SASS允許用戶編寫自己的函數(shù)：
@function even($num){@return $num * 2; }.clas_even{width:even(10px);}編譯后：.clas_even { width: 20px; }
1.sassCore
a、sassCore涵蓋范圍廣，目前涉及了setting，reset，mixin，css3，typography，media-queries，grids，helps八個部分。
b、sassCore采用開關(guān)機(jī)制，對是否支持ie6/7等眾多條件可以通過設(shè)置為true或false來搞定。
c、sassCore引入最新的sass變量機(jī)制，默認(rèn)變量!default，在應(yīng)用的時候只需在你引入sassCore文件之前，重新申明變量就ok，而不需要去修改sassCore文件。
d、sassCore引入最新的sass placeholder選擇器，如果需要extend樣式的時候，避免了先前的class申明，placeholder的優(yōu)點在于如果你不調(diào)用，根本不會解析出樣式。
e、sassCore使用新的思想，科學(xué)的方法，跟隨流行，每一個文件都是經(jīng)過深思熟慮，幾經(jīng)更改的結(jié)晶。
參考地址： https://github.com/marvin1023/sassCore
2.Compass
Compass是Sass的工具庫（toolkit）。
Sass本身只是一個編譯器，Compass在它的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充Sass的功能。它們之間的關(guān)系，有點像Javascript和jQuery、Ruby和Rails、python和Django的關(guān)系。Compass應(yīng)該是目前最成功的sass庫吧，功能也是超級強(qiáng)大，但是也很累贅，太復(fù)雜了，要想用好，學(xué)習(xí)成本比較高。
官網(wǎng)地址： http://compass-style.org/
3.bourbon
A simple and lightweight mixin library for Sass.
官網(wǎng)地址: http://bourbon.io/
sublime text直接安裝SASS插件
1.使用koala的優(yōu)勢：
a.多語言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
b.實時編譯：監(jiān)聽文件，當(dāng)文件改變時自動執(zhí)行編譯，這一切都在后臺運行，無需人工操作。
c.編譯選項：既可統(tǒng)一設(shè)置文件的編譯選項，也可單獨設(shè)置某個文件的編譯選項。
d.強(qiáng)大的文件右鍵功能：右鍵文件元素，即可操作打開文件，打開文件目錄，打開輸出文件目錄，設(shè)置輸出文件目錄，編譯，刪除六大常用功能。
e.錯誤提示：在編譯時如果遇到語法的錯誤，koala將在右下角彈出錯誤信息，方便開發(fā)者定位代碼錯誤位置。
f.跨平臺：windows、linux、mac都能完美運行。
g.免費且負(fù)責(zé)：koala完全免費，而且作者很負(fù)責(zé)，有什么問題作者都會及時給予答復(fù)，意見什么的可以直接提交給作者，一般在下一個版本就能得到解決。
2.編譯選項介紹
a.自動編譯：是否啟用自動編譯；
b.編譯選項：Compass Mode,Line Comments,Debug Info，Unix Lines；
c.輸出方式：nested，compressed，compact，expanded;
3.官網(wǎng)地址：
http://koala-app.com/index-zh.html
SASS官網(wǎng)： http://sass-lang.com/
聯(lián)系客服
