http://www.w3cplus.com/sassguide/
http://www.ruanyifeng.com/blog/2012/11/compass.html

基本特性

• sass中可以定義變量，方便統(tǒng)一修改和維護(hù)
• sass可以進(jìn)行選擇器的嵌套，表示層級(jí)關(guān)系
• sass中如導(dǎo)入其他sass文件(可以使用導(dǎo)入文件的變量)，最后編譯為一個(gè)css文件，優(yōu)于純css的@import
• sass中可用mixin定義一些代碼片段，且可傳參數(shù)，方便日后根據(jù)需求調(diào)用

<!--處理css3的前綴兼容輕松便捷 @mixin語(yǔ)法后面有介紹（ctrl + F）-->
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

• sass可通過(guò)@extend來(lái)實(shí)現(xiàn)代碼組合聲明，使代碼更加優(yōu)越簡(jiǎn)潔
• 進(jìn)行簡(jiǎn)單的加減乘除運(yùn)算等
• 集成了大量的顏色函數(shù)

安裝

1. 首先安裝依賴(lài)環(huán)境ruby
2. 打開(kāi)ruby的cmd，執(zhí)行 gem install sass命令安裝sass
3. 命令 sass style.scss style.css轉(zhuǎn)譯sass為css文件
   轉(zhuǎn)譯比較蛋疼，需要以管理員身份打開(kāi)cmd或者打開(kāi)ruby的cmd doss窗口，否則系統(tǒng)不識(shí)別sass命令(難道需要重啟？待確認(rèn))
4. 單文件監(jiān)聽(tīng) sass --watch style.scss:style.css
5. 文件夾監(jiān)聽(tīng)命令 sass --watch sassFileDirectory:cssFileDirectory

工具

• 官方在線(xiàn)轉(zhuǎn)換器
• koala.exe 下載
• sass監(jiān)聽(tīng)
• webstorm配置監(jiān)聽(tīng)（設(shè)置-工具-文件監(jiān)聽(tīng)器-添加sass或scss監(jiān)聽(tīng) 注意修改Programe配置項(xiàng)）
  ![4KKY@@_U{{54@4%Z0SJ`@8.png

注意 遇到中文無(wú)法監(jiān)聽(tīng)通過(guò)的解決辦法

1. 進(jìn)入【ruby安裝目錄\lib\ruby\gems\2.2.0\gems\sass-3.x.xx\lib\sass】；
   打開(kāi)【engine.rb】文件添加 Encoding.default_external = Encoding.find('utf-8')，放在所有的 require "xxx"后面；

2. sass內(nèi)部最前邊加上 @charset "UTF-8";

語(yǔ)法

參考文檔：http://www.w3cplus.com/sassguide/syntax.html

1. 文件后綴名： sass（不適用大號(hào)和分號(hào)的語(yǔ)法，不推薦使用）和scss（類(lèi)似css的語(yǔ)法，推薦）

2. 導(dǎo)入@import "ScssFileNameWithoutSuffix": 編譯時(shí)會(huì)將@import的scss文件合并進(jìn)來(lái)只生成一個(gè)CSS文件，可以使用引用文件中定義的變量（把變量定義在一個(gè)文件，作為公共文件導(dǎo)入），可以減少瀏覽器http請(qǐng)求！

3. 注釋?zhuān)航K于支持//行注釋了，css只支持塊狀注釋/*...*/

4. 變量

   • 一般變量 $varName: value;（可以全局使用）
   • 默認(rèn)變量 $varName: value !default;（根據(jù)需求來(lái)覆蓋：重新聲明即可）
   • 特殊變量 如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用

   $borderDirection: top !default; 
   .border-#{$borderDirection}{
       border-#{$borderDirection}:1px solid #ccc;
   }
   

   • 全局變量 在變量值后面加上!global即為全局變量。(這個(gè)目前還用不上,等待新版本的sass設(shè)計(jì)好全局變量和局部變量的問(wèn)題)
   • 多值變量 list map (看例子)

 $linkColor: #08c #333 !default; //第一個(gè)值為默認(rèn)值，第二個(gè)鼠標(biāo)滑過(guò)值
 a {
    color:nth($linkColor,1);
    &:hover{
        color:nth($linkColor,2);
        }
 }

5. 嵌套(Nesting)
   • 選擇器嵌套：在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承
   • 屬性嵌套：屬性擁有同一個(gè)開(kāi)始單詞...可以這么寫(xiě)

.fakeshadow {
    border: {
        style: solid;
        left: {
          width: 4px;
          color: #888;
        }
        right: {
          width: 2px;
          color: #ccc;
        }
    }
}

- @at-root sass3.3.0中新增的功能，跳出所有的被嵌套選擇器
- @keyframes @media 等...

6. 混合(mixin): 使用@mixin聲明混合，可以傳遞參數(shù)，參數(shù)名以$符號(hào)開(kāi)始，多個(gè)參數(shù)以逗號(hào)分開(kāi)(注意不用逗號(hào)的可能是一個(gè)list參數(shù))，也可以給參數(shù)設(shè)置默認(rèn)值。聲明的@mixin通過(guò)@include來(lái)調(diào)用

    <!--sass style-->
   @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
       border-bottom:$border;
       padding-top:$padding;
       padding-bottom:$padding;  
   }
   .imgtext-h li{
       @include horizontal-line(1px solid #ccc);
   }
   .imgtext-h--product li{
       @include horizontal-line($padding:15px);
   }
   
   <!--to css style-->
   .imgtext-h li {
       border-bottom: 1px solid #cccccc;
       padding-top: 10px;
       padding-bottom: 10px;
   }
   .imgtext-h--product li {
       border-bottom: 1px dashed #cccccc;
       padding-top: 15px;
       padding-bottom: 15px;
   }
   

7. 繼承:選擇器繼承可以讓選擇器繼承另一個(gè)選擇器的所有樣式，并聯(lián)合聲明。使用關(guān)鍵詞@extend，后面緊跟需要繼承的選擇器。
   占位選擇器%：如果不調(diào)用則不會(huì)有任何多余的css文件，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式，然后實(shí)際應(yīng)用中不管是否使用了@extend去繼承相應(yīng)的樣式，都會(huì)解析出來(lái)所有的樣式。占位選擇器以%標(biāo)識(shí)定義，通過(guò)@extend調(diào)用。

8. 內(nèi)置函數(shù)：用的最多應(yīng)該是顏色函數(shù)（lighten減淡和darken加深，其調(diào)用方法為lighten($color,$amount)和darken($color,$amount)）

9. 自定義函數(shù): @fuction，@return

   $baseFontSize:      10px !default;
   $gray:              #ccc !defualt;        
   
   // pixels to rems 
   @function pxToRem($px) {
     @return $px / $baseFontSize * 1rem;
   }
   
   body{
     font-size:$baseFontSize;
     color:lighten($gray,10%);
   }
   .test{
     font-size:pxToRem(16px);
     color:darken($gray,10%);
   }
   

10. 運(yùn)算：對(duì)數(shù)值型的Value(如：數(shù)字、顏色、變量等)進(jìn)行加減乘除四則運(yùn)算

11. 條件語(yǔ)句 @if @else if @else ;
    三目運(yùn)算：if($condition, $if_true, 三個(gè)參數(shù)分別表示：條件，條件為真的值，條件為假的值。

``` css
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}
```

12. for循環(huán)
    @for $var from <start> through <end>
@for $var from <start> to <end>
    $i表示變量，start表示起始值，end表示結(jié)束值
    這兩個(gè)的區(qū)別是關(guān)鍵字through表示包括end這個(gè)數(shù)，to則不包括end這個(gè)數(shù)。

``` css
//sass style 
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//to css style 
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}
```

13. each循環(huán) (可以參考css精靈生成的sass代碼，雷同呢~~)
    @each $var in <list or map>
    $var表示變量，list和map表示list類(lèi)型數(shù)據(jù)和map類(lèi)型數(shù)據(jù)

``` css
//sass style 
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style 
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
```

``` css
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}
```

14. 列表項(xiàng)