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

  
SASS是Syntactically Awesome Stylesheete

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

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

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

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

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

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

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

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

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

sass demo.scss

或者指定css文件名

sass demo.scss product.css

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

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

編譯后：

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

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

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

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

編譯后：

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

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

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

編譯后：

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

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

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

編譯后：

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

當然實際情況font定義可能更簡潔些，這里只是做一個示例。

SASS中，你可以對屬性值進行簡單的運算， 比如：

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

編譯后生成：

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

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

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

編譯后可以得到一個運算好的顏色值：

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

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

SASS的混合是一個非常值得你去嘗試的特性，如果你對這個概念不太清楚，那么你可以認為他就是一個模板的宏定義，而且這個宏還能接收參數(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為默認參數(shù)，可以通過傳遞參數(shù)來覆蓋默認參數(shù)，編譯后效果如下：

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

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

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

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

編譯后：

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

.subclass {
  border-width: 2px;
}

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

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

gem install compass

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

工程的創(chuàng)建

compass create yourpj;

此時會在目錄下生成三個文件：

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

sass存放sass源文件

stylesheets存放編譯后生成的css

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

 compass init

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

compass compile

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

compass watch

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

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

css3 css3命令模塊

layout 布局模塊

typography 版式模塊

utilities 工具類

reset使用：

@import "compass/reset";

這樣就會在css中生成重置樣式了，不用我們再自己定義重置樣式了。

css3使用：

@import "compass/css3";

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

　@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;
　　}

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