小白Sass教程---通过实例学Sass--第四讲--属性嵌套

CSS规则在sass中可以进行嵌套，css属性也可以进行嵌套，属性嵌套的规则是：

有中横线的属性可以拆解嵌套，以中横线为界限进行拆解，依次嵌套

废话不多说，直接上代码：

.lesson3-demo2{
    .box{
      height: 100px;
      width: 800px;
      padding: {
        top:  20px;
        left: 30px;
      }
      border: {
        left: 5px solid #3da7f5;
        right: 5px solid #f51022;
        top: 5px solid #41f518 {
          left-radius: 25px;
          right-radius: 25px;
        }
        bottom: 5px solid #f50d5f {
          left-radius: 25px;
          right-radius: 25px;
        }
      }
    }
  }

可以看到，padding属性和border属性都进行了嵌套，这样代码逻辑度更好，像我初接触sass，就觉得虽然减少了代码量，而且加深了逻辑结构，但是纯css读起来更直观。在浏览器中，是没有任何问题的，以上sass会被解析成以下css。

.lesson3 .lesson3-demo2 .box {
    height: 100px;
    width: 800px;
    padding-top: 20px;
    padding-left: 30px;
    border-left: 5px solid #3da7f5;
    border-right: 5px solid #f51022;
    border-top: 5px solid #41f518;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom: 5px solid #f50d5f;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}