Sass是一種css的擴充套件，可以使得css的編碼更加強大和優雅。sass支援使用變數、條件、迴圈、巢狀、繼承、mixin、函式等強大的功能。

Sass特點：

• 對css完全相容
• 語言擴充套件，例如變數、巢狀、mixins
• 擁有大量函式，可以用來操作顏色及其他屬性值
• 高階特性如control directives
• 可以自定義格式化輸出

sass有兩種語法格式，分別以sass和scss為字尾名。scss語法一般css相同，以大括號分隔作用域，以分號來分隔屬性；而sass則以縮排分隔作用域，換行分隔屬性。

//scss syntax 
div{
  color: #ccc;
}

//sass syntax
 

div
  color: #ccc

兩種語法之間可以用sass-convert命令列來轉換

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

1. 使用Sass

sass是用ruby語言寫的，因此在安裝sass之前首先需要安裝ruby，然後就可以用以下命令安裝：

gem insall sass

將sass檔案轉換為css檔案：

sass input.scss output.css
 

也可以監聽sass檔案的變化，並實時轉換為css：

sass --watch input.scss:output.css

如果想要監聽整個資料夾中的內容，也可以使用如下命令：

sass --watch app/sass:public/stylesheets

2. css擴充套件

2.1 巢狀選擇器

sass允許巢狀使用css選擇器，如下所示：

.out{
  .inner{
    color:#ccc;
  }
}

將被編譯成

.out .inner {
  color: #ccc; 

}

2.2 巢狀屬性

css中有一大類屬性是具有名稱空間的，例如border-color、border-radius、border-image等。sass提供了更簡潔的方法用於對這類屬性的設定：

#main{
  border:{
    color: #ccc;
    radius: 3px;
    width: 1px;
  }
}

將被編譯成

#main {
  border-color: #ccc;
  border-radius: 3px;
  border-width: 1px; }

2.3 &：引用父選擇器

& 表示對一個父選擇器的使用，有時候使用&會使得樣式表達更加簡介，例如使用hover屬性時：

a{
  color:#1b6d85;
  &:hover{
    color: #de1d18;
  }
}

將被編譯成

a {
  color: #1b6d85; }
  a:hover {
    color: #de1d18; }

&也能新增字尾來構造新的選擇器，例如：

#main{
  color:#ccc;
  &-side{
    color:#aaa;
  }
}

將被編譯成

#main {
  color: #ccc; }
  #main-side {
    color: #aaa; }

3. 計算

3.1 變數

sass中加入了變數，變數以美元符號$開頭，例如：

$gray:#ccc;

並使用$來引用變數

div{
  color: $gray;
}

如果變數在選擇器外面定義，則屬於全域性變數，如果在選擇器內部定義，則只能在該選擇器作用範圍內使用。當然也可以使用!global來將其宣告為全域性變數：

.global{
  $blue:#00f !global;
}

3.2 計算

SassScript支援對數值進行算數操作，包括加(+)、減(-)、乘(*)、除(/)、取餘(%)。算數操作可以保留單位，比如下面兩種加法都是合法的：

.operation{
  height:1+1px;
  width:1px+1px;
}

將編譯成

.operation {
  height: 2px;
  width: 2px; }

但是需要注意的是對於不同單位的數值（如px和em）不能進行算數操作。

對於乘法來說，如果兩個數值具有相同的單位，相乘時會生成單位的平方，但是在css中單位的平方是不允許的。

而對於除法來說，由於css中已經存在除法表示式，如10px/2px，這種表示式在輸出為css不會被計算成結果，除非由括號包圍，正確的使用方式是10px/2。

對於減法，使用負號(-)時需要在兩邊有空格。

除此之外，算數操作中也可以使用變數。

.operation{
   $width:5px;
   width: $width*2;
   height:2*2px;
   font-size: 5px - 1px;
   margin-bottom: (10px/5);
   margin-left: (10px/5px);
   margin-right: 10px/5px;
   margin-top: 2px+10px/5px;
}

將被編譯成

.operation {
  width: 10px;
  height: 4px;
  font-size: 4px;
  margin-bottom: 2px;
  margin-left: 2;
  margin-right: 10px/5px;
  margin-top: 4px; }

對於顏色值，rgb三個值是分開計算的，例如：

.color{
  color: #001122+#002244;
}

將被計算成

.color {
  color: #003366; }

4. 表示式與函式

4.1 條件語句

條件語句以@if、@else if、@else為關鍵字

div {
  @if ($width>2px) {
    height: 5px;
  } @else {
    height: 10px;
  }
}

將被編譯成

div {
  height: 5px; }

4.2 迴圈語句

迴圈語句有三種形式：@for、@each、@while，@for和@while與普通迴圈相同，@each用於遍歷list和map。

@for

@for有兩種形式，分別是from (start) through (end)和from (start) to (end)，其區別是前者的範圍是從start到end，後者的範圍是從start到end-1

@for $var from 1 to 3{
  .item-#{$var}{
    width: 2px*$var;
  }
}

將被編譯成

.item-1 {
  width: 2px; }

.item-2 {
  width: 4px; }

@while

$var:3;
@while $var>0{
  $var : $var - 1;
  .item-#{$var}{
    width:$var px; 
  }
}

將被編譯成

.item-2 {
  width: 2 px; }

.item-1 {
  width: 1 px; }

.item-0 {
  width: 0 px; }

@each

@each可用於遍歷<list or map>中的變數

//遍歷list
@each $var in main, sider, foot {
  .#{$var}-item {
    color: #ccc;
  }
}

將被編譯成

.main-item {
  color: #ccc; }

.sider-item {
  color: #ccc; }

.foot-item {
  color: #ccc; }

//遍歷map
@each $key, $value in (main:5px, sider:10px, foot:5px) {
  .#{$key} {
    height: $value;
  }
}

將被編譯成

.main {
  height: 5px; }

.sider {
  height: 10px; }

.foot {
  height: 5px; }

4.3 函式

sass中使用@function定義函式，使用@return返回值，例如：

@function my_add($var1,$var2){
  @return $var1 + $var2;
}

div{
  width: my_add(1px,2px);
}

將被編譯成

div {
  width: 3px; }

需要注意的是：函式定義名稱中的下劃線(_)和橫線(-)是等同的，即上面的使用my-add(1px,2px)也是可以的。

5. 樣式重用

5.1 @import

使用@import可以匯入其他的sass檔案，例如想要匯入一個foo.scss檔案，由於匯入的預設字尾名為.scss和.sass，因此下面兩中方式均可：

@import "foo.scss";

或

@import "foo";

雖然@import一般都在文件的頭部使用，但也可以在css規則中使用，例如

在一個for-import.scss檔案中包含

.im-test{
  height: 10px;
}

使用

div{
  @import "for-import";
}

將被編譯成

div .im-test {
  height: 10px; }

5.2 @extend

使用@extend可以繼承另一個選擇器的屬性，例如happy類定義了基本屬性，而very-happy類在具有happy類屬性的同時還增加其他屬性：

.happy{
  height: 50px;
  width: 50px;
}

.very-happy{
  @extend .happy;
  background-color: #5bc0de;
}

將被編譯成

.happy, .very-happy {
  height: 50px;
  width: 50px; }

.very-happy {
  background-color: #5bc0de; }

@extend的實際原理是所有繼承的選擇器出現的地方都應用當前選擇器，例如下面所示，.happy下面的div、 hover屬性都會被.very-happy繼承：

.happy{
  height: 50px;
  width: 50px;
}
.happy div{
  border: 1px;
}
.happy:hover{
  color: #de1d18;
}
.very-happy{
  @extend .happy;
  background-color: #5bc0de;
}

將被編譯成

.happy, .very-happy {
  height: 50px;
  width: 50px; }

.happy div, .very-happy div {
  border: 1px; }

.happy:hover, .very-happy:hover {
  color: #de1d18; }

.very-happy {
  background-color: #5bc0de; }

此外@extend也支援多重繼承、鏈式繼承，在這裡不作多述。

5.3 @mixin

@mixin可以用於定義一些可重用的樣式，並用@include來引用這些樣式，例如：

@mixin title{
  font-size: 18px;
  color: #222;
}

.top-title{
  @include title;
  margin: 10px;
}

將被編譯成

.top-title {
  font-size: 18px;
  color: #222;
  margin: 10px; }

@mixin似乎與@extend非常相似，但@mixin強大的地方在於它可以傳遞引數,類似於函式：

@mixin title($color){
  font-size: 18px;
  color: $color;
}

.top-title{
  @include title(#222);
  margin: 10px;
}

將被編譯成

.top-title {
  font-size: 18px;
  color: #222;
  margin: 10px; }