一、变量
$my-color:red
.box{
color:$my-color;
}
二、嵌套规则
- 选择器的嵌套：
.box{
color:red;
.childrenBox{
color:blue
}
h1,h2{
color:yellow
}
&:hover{
color:black
}
}
编译后的结果
···
.box{color:red}
.box .children{color:blue}
.box h1,.box h2{color:yellow}
.box:hover{color:black}
···
可以配合其它选择其进行嵌套
div>p：命中div的直接子代P，孙不会被命中。
h+p ： 只会命中第一个相邻的匹配元素。
h~p : 命中同级后面所有P属性的嵌套
.box{
border:1px solid black{
left:0px;
bottom:0px
}
}
编译后：
···
.box{border:1px solid black;
border-left:0px;
border-bottom:0px;
}
···
