# 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;
}
~~~
