摘要：在吸取了的一些特性基礎(chǔ)上，有了大幅改進(jìn)，也就是現(xiàn)在的。嵌套極大程度上降低了選擇器名稱和屬性的重復(fù)書寫。選擇器嵌套選擇器嵌套是指從一個(gè)選擇器中嵌套子選擇器，來實(shí)現(xiàn)選擇器的繼承關(guān)系。也已經(jīng)成為的一個(gè)標(biāo)配組件。

  
SASS是Syntactically Awesome Stylesheete

  Sass的縮寫，它是css的一個(gè)開發(fā)工具，提供了很多便利和簡單的語法，讓css看起來更像是一門語言，這種特性也被稱為“css預(yù)編譯”。它的主要設(shè)計(jì)思想是讓我們可以按照編程的思路編寫自己的樣式，然后通過“編譯器”生成我們所需要的css文件。

當(dāng)然，SASS只是css預(yù)編譯工具中的一種，類似的工具還有Less、stylus等，SASS起初語法采用縮進(jìn)排列形式，但對(duì)于設(shè)計(jì)師來說既不直觀還容易出現(xiàn)錯(cuò)誤。在吸取了Less的一些特性基礎(chǔ)上，SASS3.0有了大幅改進(jìn)，也就是現(xiàn)在的SCSS。

易維護(hù)，更方便的定制
對(duì)于一個(gè)大型或者稍微有規(guī)模的UI來說，如果需要替換下整體風(fēng)格，或者是某個(gè)字體的像素值，比如我們經(jīng)常會(huì)遇到panel，window以及portal共用一個(gè)背景色，這個(gè)時(shí)候按照常規(guī)的方式，我們需要一個(gè)個(gè)定位到元素使用的class，然后逐個(gè)替換，SASS提供了變量的方式，你可以把某個(gè)樣式作為一個(gè)變量，然后各個(gè)class引用這個(gè)變量即可，修改時(shí)，我們只需修改對(duì)應(yīng)的變量。
對(duì)于編程人員的友好

對(duì)于一個(gè)沒有前端基礎(chǔ)的編程人員，寫css樣式是一件非常痛苦的事情，他們會(huì)感覺到各種約束，為什么我不能定一個(gè)變量來避免那些類似“變量”的重復(fù)書寫？為什么我不能繼承上個(gè)class的樣式定義？。。。SASS/SCSS正是幫編程人員解開了這些疑惑，讓css看起來更像是一門編程語言。

效率的提升
對(duì)于一個(gè)前端開發(fā)人員來說，我不熟悉編程，也不關(guān)注css是否具有的一些編程語言特性，但這不是你放棄他的理由，css3的發(fā)展，加之主流瀏覽器的兼容性不一，很多瀏覽器都有自己的兼容hack，很多時(shí)候我們需要針對(duì)不同的瀏覽器寫一堆的hack，這種浪費(fèi)時(shí)間的重復(fù)勞動(dòng)就交給SASS處理去吧！

SASS最早來源于Haml項(xiàng)目，但這個(gè)工程飽受詬病，很多人認(rèn)為它使html失去語義化的特性，因此，并沒有廣泛的得到推廣，而源自于它的SASS受到一致的認(rèn)可，SASS基于Ruby編寫，也是Ruby On Rails的主力插件。盡管如此，你無需擔(dān)心自己沒有Ruby基礎(chǔ)，你需要的只是一個(gè)Ruby環(huán)境（現(xiàn)在已經(jīng)有人把SASS移植到python編譯環(huán)境下了）。

Ruby的下載地址：https://www.ruby-lang.org/zhX31Xcn/ window下可以直接下載安裝包

安裝SASS，安裝完ruby之后，你就可以直接在命令行執(zhí)行下面的命令（注冊(cè)為環(huán)境變量）：
>gem install sass

注：由于國內(nèi)網(wǎng)絡(luò)原因，可能會(huì)導(dǎo)致gem安裝插件時(shí)失敗，此時(shí)可以將gem源切換為淘寶的ruby鏡像站http://ruby.taobao.org/
3. 使用
SASS文件的后綴為.scss，可以使用下面的命令將scss文件編譯為最終使用的css文件：

sass demo.scss

或者指定css文件名

sass demo.scss product.css

SASS支持變量的定義，你可以使用$來定義一個(gè)變量，這樣我們就可以把一些公用的樣式定義為一個(gè)變量，在使用時(shí)直接引用即可：

$white:#fff;
$font12:12px;
.menu{
    color: $white;
    font-size: $font12;
}

編譯后：

.menu {
  color: white;
  font-size: 12px;
}

SASS支持兩種嵌套方式：選擇器嵌套和屬性嵌套。嵌套極大程度上降低了選擇器名稱和屬性的重復(fù)書寫。

選擇器嵌套
選擇器嵌套是指從一個(gè)選擇器中嵌套子選擇器，來實(shí)現(xiàn)選擇器的繼承關(guān)系。

    .header{
       .logo{
           display: block;
           border: none;
       }
       ul li{
           line-break: normal;
       }
    }

編譯后：

.header .logo {
  display: block;
  border: none;
}
.header ul li {
  line-break: normal;
}

兩者對(duì)比不難發(fā)現(xiàn)，省去了很大一部分的選擇器的層級(jí)聲明。
可以通過&來表示父元素選擇器，比如我們聲明一個(gè)a標(biāo)簽的樣式：

    a{
        text-decoration: none;
        &:hover{
            color: #007998;
        }
    }

編譯后：

a {
  text-decoration: none;
}
a:hover {
  color: #007998;
}

屬性嵌套
屬性嵌套，是指將帶有相同前綴單詞的屬性提出來，作為一個(gè)公有的屬性，嵌套進(jìn)其他屬性，就像很多姓氏一樣的人，把這些人姓氏只記一次，后面跟上不同的名字。

    h3{
        font:{
            size:26px;
            weight:normal;
            family:arial
        }
    }

編譯后：

h3 {
  font-size: 26px;
  font-weight: normal;
  font-family: arial;
}

當(dāng)然實(shí)際情況font定義可能更簡潔些，這里只是做一個(gè)示例。

SASS中，你可以對(duì)屬性值進(jìn)行簡單的運(yùn)算， 比如：

$white:#fff;
$font12:12px;    
.newsize{
        font-size: $font12 + 2;
        color:$white - #007998;
    }

編譯后生成：

.newsize {
  font-size: 14px;
  color: #ff8667;
}

當(dāng)然除了最基本的加減乘除運(yùn)算函數(shù)，SASS還提供了很多其他有趣的函數(shù)，像我們最常用的顏色函數(shù)lighten（減淡）和darken（加深）。

.lgt{
    color: lighten($black,10%);
    background-color: darken($white,50%);
}

編譯后可以得到一個(gè)運(yùn)算好的顏色值：

.lgt {
  color: #1a1a1a;
  background-color: gray;
}

更多的函數(shù)信息，請(qǐng)查看SASS官方函數(shù)大全

SASS的混合是一個(gè)非常值得你去嘗試的特性，如果你對(duì)這個(gè)概念不太清楚，那么你可以認(rèn)為他就是一個(gè)模板的宏定義，而且這個(gè)宏還能接收參數(shù)。

@mixin box-shadow{
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.funny-box{
    @include box-shadow;
}

編譯后：

.funny-box {
  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
}

帶參數(shù)的mixin：

@mixin border-radius($circle:50px){
    -webkit-border-radius: $circle;
    -moz-border-radius: $circle;
    border-radius: $circle;
}
.circle{
    @include border-radius(10px);
}

$circle:50px為默認(rèn)參數(shù)，可以通過傳遞參數(shù)來覆蓋默認(rèn)參數(shù)，編譯后效果如下：

.circle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

除此之外，minxin還支持多個(gè)參數(shù)，也支持類似于java中的String...類型的多個(gè)值的傳遞。

既然SASS看起來像一門語言了，那么其他語言的一些基本特性，也應(yīng)該是其所具備的，SASS不孚眾望，具備了一個(gè)簡單的繼承特性，使用這個(gè)特性需要關(guān)鍵字@extend。

.pclass{
  border: 4px solid #ff9aa9;
}
.subclass{
  @extend .pclass;
  border-width: 2px;
}

編譯后：

.pclass, .subclass {
  border: 4px solid #ff9aa9;
}

.subclass {
  border-width: 2px;
}

介紹完SASS的一些基本入門知識(shí)點(diǎn)后，你是否有想嘗試下的沖動(dòng)呢？工欲善其事，必先利其器；這里簡單介紹下一個(gè)開發(fā)中經(jīng)常使用的SASS工具compass，compass是SASS團(tuán)隊(duì)成員開發(fā)的，compass是對(duì)SASS的一個(gè)封裝，目的是為開發(fā)者提供一些豐富的mixin組件以及一些實(shí)用的工具模塊。compass也已經(jīng)成為ruby on rails的一個(gè)標(biāo)配組件。

安裝依然使用ruby gem安裝方式，參照前面安裝sass過程，gem命令如下：

gem install compass

現(xiàn)在安裝compass時(shí)，一般都附帶安裝上了sass組件，也就是說你可以跳過前面安裝sass的流程了。

工程的創(chuàng)建

compass create yourpj;

此時(shí)會(huì)在目錄下生成三個(gè)文件：

config.rb這是個(gè)配置文件，主要指定sass源文件地址，以及編譯后生成的css文件地址

sass存放sass源文件

stylesheets存放編譯后生成的css

已有工程的初始化
對(duì)于已經(jīng)創(chuàng)建好的工程，要想支持compass編譯，只需要初始化一下就可以(切換到指定目錄下)：

 compass init

編譯
完成sass的開發(fā)后，只需要運(yùn)行下編譯命令：

compass compile

compile支持多種模式的編譯，詳細(xì)信息可通過compass compile -h查看。
每次編寫sass完成后，都需要手動(dòng)運(yùn)行下編譯命令，能不能自動(dòng)編譯呢？那當(dāng)然是可以的，只需要對(duì)當(dāng)前工程添加watch監(jiān)視，如下：

compass watch

組件模塊
前面我們提到compass提供了便捷的組件模塊，我們來一起看看有哪些常用的組件吧：

reset 瀏覽器樣式重置模塊，減少不同瀏覽器間的差異性

css3 css3命令模塊

layout 布局模塊

typography 版式模塊

utilities 工具類

reset使用：

@import "compass/reset";

這樣就會(huì)在css中生成重置樣式了，不用我們?cè)僮约憾x重置樣式了。

css3使用：

@import "compass/css3";

這是個(gè)絕對(duì)好用的特性，我們知道由于瀏覽器對(duì)css3支持的差異性，我們很多時(shí)候需要寫一堆針對(duì)不同瀏覽器前綴樣式，著實(shí)很煩人，css3命令模塊幫我們解決了這個(gè)問題，我們只需include相應(yīng)樣式定義即可，compass會(huì)自動(dòng)為我們生成針對(duì)不同瀏覽器的樣式定義：

　@import "compass/css3";
　　.circle {
　　　　@include border-radius(5px);
　　}

編譯后：

　　.circle {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

就寫到這吧，其他特性慢慢探討吧！