Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

0. 介紹

• CSS擴展語言
• 完全兼容CSS
• 簡單 穩定 可維護
• 兩種語法（sass & scss）

    //文件后綴名為sass的語法
    body
      background: #fff
      font-size: 12px
    div
      background: #000
    
    
    //文件后綴名為scss的語法  
    body {
     background: #fff;
     font-size: 12px;
    }
    div {
     background: #000;
    } 

1. 變量(Variables)

Sass中允許使用變量， 所有變量以 $ 開頭。

    $width: 5rem;
        
    #main {
      width: $width;
    }

可以使用 #{ } 插入變量。

    $name: ".main";
    
    div #{name} {
      color: #ffffff;
    }   

支持7種數據類型

• Number: 1.2, 13, 10px
• String: “foo”, ‘bar’, baz
• Color: blue, #04a3f9, rgba(255, 0, 0, 0.5))
• Boolean: true, false
• Null: null
• Lists:
  $font-list: 'Raleway','Dosis','Lato';
• Maps:
  $style: (
  'color': tomato,
  'background': black
  );

2. 嵌套規則(Nested rules)

Sass允許選擇器之間嵌套。符號 & 用來引用父元素。

    #main {
      width: 5rem;
      height: 5rem;
        
      div {
        font-size: 1rem;
      }
        
      div p {
        font-size: 1rem;
      }
        
      div, p {
        font-size: 1rem;
      }
        
      &.active {
        width: 10rem;
        height: 10rem;
      }
        
      .active &{
        width: 10rem;
        height: 10rem;
      }
    }

編譯后結果：

    #main {
      width: 5rem;
      height: 5rem;
    }
    
    #main div {
      font-size: 1rem;
    }
    
    #main div p {
      font-size: 1rem;
    }
    
    #main div, #main p {
      font-size: 1rem;
    }
    
    #main.active {
      width: 10rem;
      height: 10rem;
    }
    
    .active #main {
      width: 10rem;
      height: 10rem;
    }

Sass還支持屬性嵌套

    nav {
      border: 1px solid #ccc;
      border-left: 0px;
      border-right: 0px;
    }

編譯后結果：

    nav {
      border: 1px solid #ccc {
        left: 0px;
        right: 0px;
      }
    }

3. @import

Sass允許import外部文件，使用 @import 命令。

導入文件的后綴若為 .sass 或 .scss, import時可以不加文件后綴。

    @import "index.scss";
    @import "index";

可以在一個 @import 后可以導入多個文件

    @import "index1.scss", "index2.scss";

4. @extend

Sass允許選擇器之間相互繼承，使用 @extend 命令。

    #first {
        font-size: 12px;
    }
    
    #second {
        @extend #first;
        color: #ffffff;
    }       

編譯后結果：

    #first, #second {
      font-size: 12px;
    }

    #second {
      color: #ffffff;
    }

5. @mixin

Sass可以實現樣式復用，使用 @mixin 和 @include

    @mixin red-text {
      color: #ff0000;
    }
    
    .page-title1 {
      @include red-text;
      padding: 4px;
      margin-top: 10px;
    }
    
    .page-title2 {
      @include red-text;
      padding: 4px;
      font-size: 20px;
    }

@mixin 支持參數傳遞

    @mixin button($width, $radius: 5px) {
      width: $width;
      border-radius: $radius;
    }
    
    . button1 { 
      @include button(5px, 10px)
    }

    . button2 { 
      @include button(5px)
    }

編譯后結果：

    .button1 {
      width: 5px;
      border-radius: 10px;
    }

    .button2 {
      width: 5px;
      border-radius: 5px;
    }

@mixin支持傳遞內容，使用 @content

    @mixin mediaMax($w) {
      @media screen and (max-width: $w) {
        @content;
      }
    }
    
    .hidden-ipad {
      @include mediaMax(1024px) {
        display: none;
      }
    }

6. 函數

Sass提供了一系列的函數功能，主要有：

• 顏色函數

  • lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮
    
  • darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗
    
  • alpha($color) /opacity($color)：獲取顏色透明度值
    
  • rgba($color, $alpha)：改變顏色的透明度值

• 字符串函數

  • unquote($string)：刪除字符串中的引號
    
  • quote($string)：給字符串添加引號

• 數字函數

  • percentage($value)：將數字轉換成百分比
    
  • round($value)：四舍五入
    
  • ceil($value)：向上取整
    
  • floor($value)：向下取整
    
  • abs($value)：返回絕對值
    
  • min($numbers…)：找出最小值
    
  • max($numbers…)：找出最大值

• 列表函數
  • length($list)：返回列表長度
  • join($list1, $list2, [$separator])：將兩個列表給連成一個列表
    
  • append($list1, $val, [$separator])：將某個值放在列表的最后
    
  • zip($lists…)：將多個列表合成一個多維列表
    
  • index($list, $value)：返回某一個值在列表中的位置

......

• 自定義函數

    @function calculateNumber($number){
        @return $number + 1;
    }   

7. 資料

1. 阮一峰：<a >http://www.ruanyifeng.com/blog/2012/06/sass.html</a>
2. Sass中文：<a >http://www.sasschina.com/guide/</a>
3. SassMeister: Sass轉換器 <a >http://www.sassmeister.com/</a>