# 1.变量
~~~
$bg:red;
div{
$color:blue;
border:1px solid $color;
}
~~~
# 2.嵌套
## 2.1选择器嵌套
~~~
nav {
a {
color: red;
head & {
color:yellow;
}
}
}
~~~
~~~
//编译后
nav a {
color: red;
}
header nav a {
color: green;
}
~~~
## 2.2属性嵌套
~~~
.box {
font: {
size:12px;
family:"微软雅黑"
}
}
~~~
~~~
.box {
font-size: 12px;
font-family: "微软雅黑";
}
~~~
## 2.3伪类嵌套
~~~
.row{
&::before,&::after{
content:"";
display: table;
}
&::after{
clear: both;
}
}
~~~
复制
~~~
.row::before, .row::after {
content: "";
display: table;
}
.row::after {
clear: both;
}
~~~
