选择器嵌套
选择器的嵌套需要防止滥用,根据以下html结构来解释以下何为选择器嵌套。
结构:
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
根据以上html结构编写嵌套的scss
nav{
a{
color:red;
header & { //& 符号是取父值(前后需要加空格)。这里的父值是nav a ,那么加上header就是header nav a
color:red;
}
}
}
属性嵌套
css中很多属性前缀相同,譬如margin-top,margin-left;padding-right,padding-bottom...
.box{
border : {
left : 1px solid red;
top : 2px solid blue;
}
}
伪类嵌套
伪类嵌套需要借助`&`符号一起配合使用。
.clearfix{
&:before,
&:after{
content:"";
display:table;
}
&:after{
clear:both;
overflow:hidden;
}
}
编译出来的css
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}