巢狀(Nesting)：Sass的巢狀有兩種：一種是選擇器的巢狀；另一種是屬性的巢狀。

1、選擇器巢狀：所謂選擇器巢狀指的是在一個選擇器中巢狀另一個選擇器來實現繼承，從而增強了sass檔案的結構性和可讀性。

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

scss編譯

$linkColor:#08c #333 !default;//第一個值為預設值，第二個滑鼠滑過值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

css輸出

a {
  color: #08c;
}
 

a:hover {
  color: #333;
}

2、所謂屬性巢狀指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

scss編譯

.longzhoufeng {
    border: {
        style: solid;
        left: {
            width: 4px;
            color: #888;
        }
        right: {
            width: 2px;
            color: #ccc;
        }
 

    }
}

css輸出

.longzhoufeng {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc;
}

或者，如圖所示