嵌套属性

某些 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;
}