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