在这里插入代码片
1)& 代表当前层级元素的上一级元素,就是当前层级元素的父元素。
2)给当前元素加一个伪类时候使用,:hover(::hover), :after(::after)
css:用css写法
a{color:red}
a:hover{color:blue};
less:用less写法
a{
color:red;
&:hover{
color:green;
}
}
---------------------------
css:
.clearfix:after{display:block; content:'';clear:both}
.clearfix{zoom:1};
less:
.clearfix{
zoom:1;
&:after{
display:block;
content:'';
clear:both;
}
}
3)代表的上一层选择器的名字,此例便是header。
/* Less */
#header{
&:after{
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式:直接把 & 替换成 #header
margin:20px;
}
}
/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套!
margin:20px;
}