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

本文主要是介绍小白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;
}

 

这篇关于小白Sass教程---通过实例学Sass--第四讲--属性嵌套的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---