我們在css中定義子樣式時，要從父節點一層一層的向內尋找，程式碼會很長，而且會有重複的程式碼。
比如：
.lesson2 div table{ border: 1px solid #ccc; } .lesson2 div table thead tr{ background-color:#ebebeb; }
.lesson2 div table tobdy tr{ background-color:#e22020; }
轉換為sass的巢狀寫法：
.lesson2{ div{ table{ border: 1px solid #ccc; thead{ tr{ background-color:#ebebeb; } } tbody{ tr{ background-color:#e22020; } } } } }
你可以想象一個塊一個塊的，就像html巢狀一樣的。
如果從sass程式碼向css程式碼推， 規則：遇到第一個html標籤，就放在左面，往裡，每遇到一個CSS選擇器，就空格一下依次放在右邊。遇到css就放好，沒遇到就空著。
比如第一層 .lesson2{} 沒有css 第二層 .lesson2 div{} 沒有css 第三層 .lesson2 div table{ border: 1px solid #ccc; 有css } 第四層 .lesson2 div table thead{} 沒有css .lesson2 div table tbody{} 沒有css 第五層 .lesson2 div table thead tr{ background-color:#ebebeb; 有css } .lesson2 div table tbody tr{ background-color:#e22020; 有css }
注意：遇到偽元素等情況，因為偽元素也是css選擇器，就會空格一下，再放在右邊，有時，解析出來的樣式並不是你想要的。
比如我想要表格中每一行滑鼠移動上去變背景色，使用偽元素就會出問題
.lesson2-demo2{ div{ table{ border: 1px solid #ccc; thead{ tr{ background-color:#ebebeb; } } tbody{ tr{ background-color:#ffffff; :hover{ background-color: red; } } } } } } 實際上:hover這一行按照規則會被解析成
.lesson2-demo2 div table tbody tr :hover { background-color: red; }
我想要的是： .lesson2-demo2 div table tbody tr:hover { background-color: red; }
看出區別了麼？解析出來的tr後面多了一個空格
這段css程式碼的功能就相當於： .lesson2-demo2 div table tbody tr td:hover { background-color: red; }
解決辦法：前面加一個&號，這樣就會直接替換，不會加空格
&符號還有另一個作用：
在它前面寫的選擇器，會被解析到&符號父級的前面，有點拗口，你可以直接下載我的例子來檢視。 注意前面的選擇器和&要有一個空格，可以試一下，沒空格應該會編譯失敗

最後，這種巢狀也可以放在群組中，比如要實現
.lesson2-demo4 .group1 span,lesson2-demo4 .group2 span,lesson2-demo4 .group3 span{
color:blueviolet;
}


寫成：


.lesson2-demo4{
  .group1,.group2,.group3{
    span{color: blueviolet}
  }
}