sass

sass有兩種後綴名文件：

一種後綴名爲sass，不使用大括號和分號；

另一種就是我們這裏使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號。

建議使用後綴名爲scss的文件，以避免sass後綴名的嚴格格式要求報錯。

//文件後綴名爲sass的語法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件後綴名爲scss的語法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

變量

sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣），如果值後面加上!default則表示默認值。

普通變量

定義之後可以在全局範圍內使用。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

默認變量

sass的默認變量僅需要在值後面加上!default即可。

//sass style
//-------------------------------
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}

sass的默認變量一般是用來設置默認值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可

//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

可以看出現在編譯後的line-height爲2，而不是我們默認的1.5。默認變量的價值在進行組件化開發的時候會非常有用。

特殊變量

一般我們定義的變量都爲屬性值，可直接使用，但是如果變量作爲屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值變量

多值變量分爲list類型和map類型，簡單來說list類型有點像js中的數組，而map類型有點像js中的對象。

list

list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關於list數據操作還有很多其他函數如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具體可參考sass Functions（搜索List Functions即可）

定義

map

map數據以key和value成對出現，其中value又可以是list。格式爲：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。關於map數據還有很多其他函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具體可參考sass Functions（搜索Map Functions即可）

定義

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用

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

全局變量

嵌套(Nesting)

sass的嵌套包括兩種：一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說起或用到的都是選擇器的嵌套。

選擇器嵌套

所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。

在選擇器嵌套中，可以使用&表示父元素選擇器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  a{
    color: #fff;
    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
}  
#top_nav a{
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

屬性嵌套

屬性嵌套

所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。拿個官網的實例看下：

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      color: #888;
    }
    right: {
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-color: #888;
  border-right-color: #ccc; 
}

當然這只是個屬性嵌套的例子，如果實際這樣使用，那估計得瘋掉。

@at-root

sass3.3.0中新增的功能，用來跳出選擇器嵌套的。默認所有的嵌套，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

普通跳出嵌套

默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示所有），rule（表示常規css），media（表示media），support（表示support，因爲@support目前還無法廣泛使用，所以在此不表）。我們默認的@at-root其實就是@at-root (without:rule)。

混合(mixin)

sass中使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設置默認值。聲明的@mixin通過@include來調用。

無參數mixin

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有參數mixin

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //參數使用默認值
}
.opacity-80{
  @include opacity(80); //傳遞參數
}

多個參數mixin

調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，後面不足的使用默認值，如不足的沒有默認值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入。

多個參數mixin

調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，後面不足的使用默認值，如不足的沒有默認值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入。

//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);
}

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

多組值參數mixin

如果一個參數可以有多組值，如box-shadow、transition等，那麼參數則需要在變量後加三個點表示，如$variables...。

//sass style
//-------------------------------   
//box-shadow可以有多組值，所以在變量參數後面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
//-------------------------------
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

@content