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{...}
}