SCSS 巢狀屬性

使用scss不但可以實現選擇器的巢狀，屬性也可以進行巢狀。

首先看一段程式碼例項:

[CSS] 純文字檢視 複製程式碼
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

上面是一個最為普通的css程式碼，它實現了nav元素的邊框設定。

在scss看來，上面的程式碼也是可以進行簡化的，程式碼如下:

[Scss] 純文字檢視 複製程式碼
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

規則如下:

（1）.把屬性名從中劃線-的地方斷開。

（2）.在根屬性後邊新增一個冒號:緊跟一個塊，把子屬性部分寫在這個{ }塊中。

再來看一段程式碼例項:

[CSS] 純文字檢視 複製程式碼
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

上面的css程式碼可以使用scss改造如下:

[Scss] 純文字檢視 複製程式碼
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}