属性嵌套

在教程中很多人都说反人类，可是我觉得很方便啊？？谜。。

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

假设你的样式中用到了：

.box1 {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

.box2 {
  font-size: 12px;
  font-weight: bold;
}

在 Sass 中我们可以这样写：

.box1 {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

.box2 {
  font: {
   size: 12px;
   weight: bold;
  }  
}

属性嵌套适用于属性名中间有“ - ”的属性