-
选择器嵌套
<header>
<nav>
<a href=“##”><span>Home<span></a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
//.scss
nav {
a {
color: red;
span{
color: yellow;
}
header & { //& 符号是取父值,这里为 nav a
color:green;
}
}
}
//编译后.css
nav a {
color: red;
}
nav a span {
color: yellow;
}
header nav a {
color: #e91881;
}
-
css属性嵌套
xx:
CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right
<nav class="box">
<a href=“##”><span>Home</span></a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
//.scss
.box{
border: {
top: 1px solid #ccc;
bottom: 1px solid #ccc;
}
}
//.css
.box {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
-
伪类嵌套
&:
/&::
//.scss
.clearfix{
&::before,
&::after{
content:"";
display: block;
}
&::after{
clear:both;
overflow: hidden;
}
}
//.css
.clearfix::before, .clearfix::after {
content: "";
display: block;
}
.clearfix::after {
clear: both;
overflow: hidden;
}
网友评论