一 使用變數

sass使用的一大好處就是可以使用變數，對於那些重複使用的屬性，可以通過變數名來引用。

1.變數宣告

sass中變數通過$來宣告，書寫方法與CSS相似，屬性值可以使用空格和逗號進行分割。與CSS屬性不同的是，其變數可以宣告在規則塊外，在規則塊內部宣告的變數只能在本規則塊內使用。舉例如下：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}

2.變數引用

CSS標準值可以存在的地方變數就可以引用，CSS生成時，變數會被他們的值所替代。

3.變數名中的下劃線

變數名中的中劃線與下劃線是相互相容的，也就是說，當宣告變數為a-b時，使用a_b也可以進行引用，但是這個規則對於純CSS來說如id，class名是不適用的。

二 巢狀規則

1.普通巢狀

sass提供巢狀規則，在CSS中，對於某一塊的樣式設定常常需要寫很多遍，但是使用巢狀會使得要是設定更加清晰，避免了重複書寫，可讀性高，當被解析為CSS時，便會將巢狀恢復成CSS對應的樣式，舉例如下：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 

2.父選擇器&

有時我們不希望後代選擇器生成這種連線，比如下面這種情況sass就無法工作：

article a {
  color: blue;
  :hover { color: red }
}

3.群組選擇器的巢狀

當在同一個容器元素裡需要對群組進行樣式設定時，使用巢狀可以減少程式碼量，舉例如下：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

4.子組合選擇器和同層組合選擇器

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

5.屬性巢狀

除了選擇器，屬性也可以巢狀編寫，對於border-width，border-color等屬性，在sass中只需要寫一次border，巢狀屬性的規則是這樣的：把屬性名從中劃線-的地方斷開，在根屬性後邊新增一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。就像css選擇器巢狀一樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分通過中劃線-連線起來，最後生成的效果與你手動一遍遍寫的css樣式一樣：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

三匯入sass檔案

1.sass區域性檔案

有時我們並不需要把所有的sass檔案轉換為單獨的css檔案，對於不想轉換成為css檔案的，可將其檔名前加上下劃線，當@import一個檔案時，可以不寫其全名，直接寫下劃線後面的部分。

2.預設變數值

sass的同一變數若宣告多次，則後面的樣式會覆蓋前面的樣式，我們可以使用!default的方式，將某一樣式宣告為預設樣式，當匯入檔案對這一變數有賦值時，則其為所賦值，否則為預設值。

3.巢狀匯入

跟原生的css不同，sass允許@import命令寫在css規則內。這種匯入方式下，生成對應的css檔案時，區域性檔案會被直接插入到css規則內匯入它的地方。

4.原生匯入

sass通常會在@import處以sass格式匯入檔案，也可以相容css，當以下三種情況出現時，會以原生的方式匯入，這會造成瀏覽器的額外下載：

1）檔案字尾是.css；2）被匯入的檔案是一個url地址；3）被匯入的檔案是url（）的值。