2-4. 嵌套屬性

在sass中，除了CSS選擇器，屬性也可以進(jìn)行嵌套。盡管編寫屬性涉及的重復(fù)不像編寫選擇器那么糟糕，但是要反復(fù)寫border-styleborder-widthborder-color以及border-*等也是非常煩人的。在sass中，你只需敲寫一遍border:

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

嵌套屬性的規(guī)則是這樣的:把屬性名從中劃線-的地方斷開，在根屬性后邊添加一個(gè)冒號:，緊跟一個(gè){ }塊，把子屬性部分寫在這個(gè){ }塊中。就像css選擇器嵌套一樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分通過中劃線-連接起來，最后生成的效果與你手動(dòng)一遍遍寫的css樣式一樣:

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

對于屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規(guī)則:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

這比下邊這種同等樣式的寫法要好:

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

屬性和選擇器嵌套是非常偉大的特性，因?yàn)樗鼈儾粌H大大減少了你的編寫量，而且通過視覺上的縮進(jìn)使你編寫的樣式結(jié)構(gòu)更加清晰，更易于閱讀和開發(fā)。

即便如此，隨著你的樣式表變得越來越大，這種寫法也很難保持結(jié)構(gòu)清晰。有時(shí)，處理這種大量樣式的唯一方法就是把它們分拆到多個(gè)文件中。sass通過對css原有@import規(guī)則的改進(jìn)直接支持了這一特性。