本文主要是介绍小白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--第四讲--属性嵌套的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!