Sass中提供了嵌套的功能,让样式代码显得非常有层次感,可以将选择器,样式等按层级一层一层嵌套下去。
Sass嵌套分为3种:
1.选择器嵌套:
比如这样一段HTML:
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
比如我们想给a标签设置样式,CSS的写法是这样的:
nav a {
color:red;
}
/*或者*/
header nav a {
color:green;
}
而在Sass中,我们使用选择器嵌套的方式书写:
nav {
a {
color: red;
header & {
color:green;
}
}
}
这样的写法,层次还是非常清晰的。不过最好不要进行太多层次的嵌套,否则代码的可阅读性会变得不好。
tips:这里的header &中,&的作用是获取当前选择器,也就是它外边的 nav a,所以header&等同于header nav a
2.属性嵌套:
Css中有很多前缀相同,但是后置不一样的样式,比如marin-left,margin-right这样的,类似的还有pading,border之类的,这样的样式也可以使用属性嵌套一层层写出:
/*Css*/
.container {
margin-left:5px
margin-top:3px;
}
可以用属性嵌套写成:
.container {
margin: {
left:5px;
top:3px;
}
}
伪类嵌套通常需要借助'&'符号一起使用,'&'为最近选择器,顾名思义,就是它会代表自身上级最近的一个选择器。
例如一段清除浮动的CSS:
clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
使用Sass的伪类嵌套书写:
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}
不得不说,如果三种嵌套混合使用,会变得非常难以阅读。所以使用嵌套要慎重呀,不能过度使用。