• css中重複寫選擇器是非常惱人的。但在Sass中，你可以在規則塊中巢狀規則塊。如：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
//一個給定的規則塊，既可以像普通的CSS那樣包含屬性，又可以巢狀其他規則塊。當你同時要為一個容器元素及其子元素編寫特定樣式時，這種能力就非常有用了。
 

• 父選擇器的識別符號&;

  - sass中css規則的巢狀相當於使用後代選擇器的方式生成連線。
  - 但是當你為連結之類的元素寫：hover這種偽類時，你並不希望以後代選擇器的方式連線。
//比如：
article a {
  color: blue;
  :hover { color: red }
}
//會被解析為：
article a{ color: blue;}
article a :hover{color: red;}
//這樣article元素內的所有子元素在被hover時都會變成紅色。這是不正確的！你只是想把這條規則應用到超連結自身。

-解決之道為使用一個特殊的sass選擇器，即父選擇器。它就是一個簡單的&符號。
article
 
 a {
  color: blue;
  &:hover { color: red }
}
//當包含父選擇器識別符號的巢狀規則被開啟時，它不會像後代選擇器那樣進行拼接，而是&被父選擇器直接替換：
article a { color: blue }
article a:hover { color: red }

• 群組選擇器的巢狀;

sass也可以處理群組選擇器的巢狀
當sass解開一個群組選擇器規則內嵌的規則時，它會把每一個內嵌選擇器的規則都正確地解出來

• 子組合選擇器和同層組合選擇器：>、+和~;

//第一個選擇器會選擇article下的所有命中section選擇器的元素。而第二個選擇器只會選擇article下緊跟著的子元素中命中section選擇器的元素。
 

  article section { margin: 5px }
  article > section { border: 1px solid #ccc }

//你可以用同層相鄰組合選擇器+選擇header元素後緊跟的p元素：
  header + p { font-size: 1.1em }

//你也可以用同層全體組合選擇器~，選擇所有跟在article後的同層article元素，不管它們之間隔了多少其他元素：
  article ~ article { border-top: 1px dashed #ccc }

//這些組合選擇器可以毫不費力地應用到sass的規則巢狀中。

//把它們放在外層選擇器後邊
article {
    > section { background: #eee }
       }
//或裡層選擇器前邊都可以
article > section { background: #eee }

• 在sass中，除了CSS選擇器，屬性也可以進行巢狀。

//把屬性名從中劃線-的地方斷開，在根屬性後邊新增一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。
nav {
  border: {
     style: solid;
     width: 1px;
     color: #ccc;
     }
}