巢狀屬性

某些 CSS 屬性屬於名稱空間，例如 border-right 屬於 border 名稱空間。為了減少寫入，我們可以利用屬性巢狀，並跳過這些字首，即使在多個級別上也是如此。

如果我們需要在名為 .borders 的類的右側和左側建立邊框，我們可以這樣寫：

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

這節省了我們不得不寫 border-right 和 border-left，但是我們仍然用 1px solid black 和 1px solid red 編寫重複程式碼。我們可以通過以下方式編寫更少重複的 CSS：

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}