寫在前面

sass大約是4年前（2011年）的新技術， sass官網 有詳細介紹，包括安裝指南、學習教程、語法細節文檔等等，很全面也很清晰

為什么有必要學sass？因為很多前端自動化工具都用sass，比如京東的JDF、淘寶的KISSY都支持sass，在實際產品的開發中，sass用得很多，而且sass語法很簡單，學習成本不高

至于sass與less，其實差異不是很大，功能相似，只是在語法細節上有差別。而且就功能而言，sass要略強于less，所以看看sass肯定是不虧的

一.sass是什么？

據官方說法，sass（Syntactically Awesome Style Sheets）是一種css擴展語言

我們知道的css只是一種標記語言，缺乏可編程特性，比如不支持變量、函數、邏輯流控制等等，缺乏這些特性使得css代碼不易維護和修改，而sass就是要給css擴展這些可編程特性

類似的東西還有less和stylus，三者的區別請查看 開源中國社區：為您詳細比較三個 CSS 預處理器（框架）：Sass、LESS 和 Stylus

二.sass與scss的區別

scss（Sassy CSS）是新版sass，其實區別不大，主要在語法格式上有差異：sass不需要花括號和分號，用縮進表示嵌套關系，僅此而已

P.S.一般都用scss格式的，可能是因為更容易從css格式過渡過來

三.sass具體語法

P.S.此處給出完整測試代碼，細節都在注釋里，建議打開 sass在線編輯 ，把下面的代碼粘過去，與生成的css代碼對比理解

// 1.這個注釋編譯后就沒了
/ 2.這個注釋編譯后還在，但壓縮后就沒了 /
/*!


3.這個注釋壓縮后都在，用來說明重要信息，比如版權聲明
*/

/ 引用a.scss文件，合并編譯結果 /
//@import "path/a";  // 因為沒有a.scss，所以會報錯
/ 引用普通css文件，編譯為@import url(...) /
@import "path/a.css";
/*

可以用嵌套結構表示后代
可以用@at-root跳出所有嵌套，感覺沒什么用，只會把代碼變得更混亂
/
div {
h2 {
 color: white;
 // 屬性也可以嵌套，但要注意屬性名后面的冒號
 border: {
   color: red;
   width: 1px;
 };
}
}
/ 可以用&引用外層元素 */
a {
span {
 &:hover {
   color: red;
 }
 span {
   // 無法引用外外層元素
   // 直接用&&會報錯，若用空格隔開則生成a span span a span span
   // 沒什么意義
   & &:hover{
 color : red;

   }
 }
}
}

/ 變量的聲明及使用 /
$myFontSize : 14px;
$attr : color;
$arr : 3 2 1; // 一維數組
$arr2 : 10 20,
        30 40;  // 二維數組
$map : (myWidth : 30px, myHeight : 50px); // 映射
// 使用變量
h1 {
  font-size : $myFontSize;  // 屬性值替換
  border-#{$attr} : red;  // 屬性名替換
  border-width : nth($arr, 3);  // 取第3個元素
  width : nth(nth($arr2, 2), 1);  // 取arr[1][0]
  height : map-get($map, myHeight);
}
/ 變量作用域 /
$myValue : 1;
$gValue : 1;
// 測試變量作用域
.test {
  $myValue : 2;
  $gValue : 2 !global; // 全局變量
  width : $myValue;
  height : $gValue;
}
.test2 {
  width : $myValue;
  height : $gValue;
}
/ 混合的聲明及使用 /
@mixin m_noArgs {
  width : 100px;
  height : 100px;
}
@mixin m_hasArgs($w, $h) {
  width : $w;
  height : $h;
}
@mixin m_hasDefaultArgs($w, $h : 100px) {
  width : $w;
  height : $h;
}
@mixin m_hasManyArgs($m, $p, $w : 100px, $h : 100px) {
  margin : $m;
  padding : $p;
  width : $w;
  height : $h;
}
@mixin m_hasGroupArgs($ts...) { // 參數個數不確定，比如漸變，陰影
  text-shadow : $ts;
}
// 使用
h1 {
  / 傳入參數多了少了都報錯 /
  @include m_noArgs;
  @include m_hasArgs(100px, 200px);
  @include m_hasDefaultArgs(50px);
  @include m_hasDefaultArgs(50px, 50px);
  @include m_hasManyArgs($p : 3px, $m : 5px); // 帶名傳參，不用管順序
  @include m_hasGroupArgs(0 1px 0 #777, 0 -1px 0 #000);
}
/ 繼承 /
// 父類
.super {
  color : red;
}
// 子類
.sub {
  // 繼承父類屬性
  @extend .super;
  // 子類屬性
  background-color : white;
}
/ 占位符選擇器%，不調用就不編譯生成css，避免繼承產生多余的css /
%header { // 不會生成css
  color : red;
}
%footer {
  color : red;
}
// 調用
.myFooter {
  @extend %footer;
}
/ 函數 /
/ 調用庫函數 /
$myColor1 : darken(#00f, 20%);  // 加深20%
$myColor2 : lighten(#00f, 20%);  // 減淡20%
p {
  color : $myColor1;
  background : $myColor2;
}
/ 自定義函數 /
@function add($arg1, $arg2) {
  @return $arg1 + $arg2;  // 注意return前面要有@
}
h1 {
  font-size : add(10px, 20px);
}
/ 運算 /
// 支持+、-、*、/、()
.test {
  //width : 12px + 1em; //報錯，單位不匹配
  color : #000 - #fff;
  color : #ccc + #eee;
}
/ 條件語句 /
$color : true;
h1 {
  @if ($color == true){ //沒有===操作符，和js不一樣
    color : red;
  }
  @else if ($color){  //if前不加@，加了報錯
    //...
  }
  @else {
    //...
  }
}
// 還有三目判斷if($condition, $if_true, $if_false)但意義不大
/ for循環 /
@for $i from 1 to 3 { // 注意：to表示[1, 3)，through表示[1, 3]
  .item-#{$i} {
    width: 20px  $i;
  }
}
/ each循環 */
$arr : top, right, bottom, left;
$arr2 : 10 20,
        20 30;
$map : (h1 : 3em, h2 : 2em, h3 : 1em);
div {
  @each $item in $arr { // 遍歷一維數組
    border-#{$item} : 1px solid red;
  }
}
p {
  @each $tb, $lr in $arr2 { // 遍歷二維數組
    outline : $tb, $lr;
    border : $tb, $lr;
  }
}
@each $h, $em in $map { // 遍歷map
{$h} {

font-size : $em;

}
}
// 參考資料：http://www.w3cplus.com/sassguide/syntax.html</pre> 

        

            如果不喜歡這種看代碼說話的方式，可以查看 W3CPlus：sass語法 ，提供了圖文并茂的講解
        
        

            P.S.個人更喜歡看代碼說話，因為代碼簡單明了，沒廢話，如果代碼示例恰到好處的話就更好了
        
        

            四.在線資源
        
        

            

                

                    sass官網 ：最標準，最權威
                
            
            

                

                    W3CPlus ：有一篇很詳盡的入門文章，圖文并茂（上面也提到了）
                
            
            

                

                    sass在線編輯器 ：不想裝ruby，還要用sass，用它就對了
                
            
            

                

                    RubyInstaller ：Windows下裝不了ruby？這里有好用的exe
                
            
        
        

            參考資料
        
    </div>
</div>