插值语句
通过 “#{}” 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} { //此处会被代替为p.foo
#{$attr}-color: blue;
}
父类选择器 &
/*!父类选择器*/
.foo.bar .baz.bang .bip.qux{
$selector:&; // $selector:.foo.bar .baz.bang .bip.qux
content: "#{$selector}";
#{$selector}{
height: 50px;
}
}
@mixin does-parent-exist{
@if &{
&:hover{
color:red;
}
}@else{
a{
color: red;
}
}
}
a{
@include does-parent-exist();
}
nav{
@include does-parent-exist();
}
@include does-parent-exist();
//将编译为
a{
color: red;
}
nav{
color: red;
}
a{
color: red;
}
,
~同级选择器 和 >子集选择器
article > section{
display: inline ;
}
article{
~art{
border-bottom: 1px;
}
>selection{ //代表article下的selection
margin-top: 1px;
}
div>{ //代表article div 下的子容器
dd{
color: red;
}
dt{
clear: both;
}
}
}