Sass嵌套所带来的问题
在CSS是如何渲染的一篇中,我们晓得CSS是从右向左进行渲染的,那么我们在写SASS时就需要格外注意嵌套问题了。因为嵌套越多,最终生成的CSS选择器就会越来越长。
例如:
ul{ li{ a{ i{ } } } }
那么,使用SASS编译后会得出:
ul {//ul相关样式} ul li { //li相关样式 } ul li a { //a相关样式 } ul li a i{ //i相关样式 }
舍弃不必要的嵌套
例如上面的那个列表,如果里面的i
确定只有a
里面有的话,那么完全可以这么写:
ul{ ... li{...} a{...} i{...} }
那么生成的选择器就不会很长,也就提交了渲染速度:
ul{...} ul li{...} ul a{...} ul i{...}
能写在父层的属性绝不写在子层
例如:
ul{ li{...} a{font-family: "Microsoft YaHei";} }
这样写无疑给浏览器增加了很多负担,可以改写成:
ul{ font-family: "Microsoft YaHei"; li{...} a{...} }