1) 变量声明
2) 变量引用
3) 变量中中划线和下划线指向同一个变量
$font-color:red; $font-border:1px solid $font-color; .box{ border:$font_border;//$font-border===font_border color:$font-color; }
$font-color:red; .box{ color:$font-color; &:hover{ color:blue; } body.ie & { color: green }//编译后 body.ie .box {color: green; } }
2) 群组选择器的嵌套
.box { h1, h2, h3 { color:red; } }
3) 子组合选择器和同层组合选择器：>、+和~
// >:选择.box下紧跟着的子元素, .box > span{ color:red; } // +:选择.box后紧跟着同层的元素, .box + span{ color:red; } // ~:选择.box后同层的元素,不管它们之间隔了多少其他元素： .box ~ span{ color:red; }
原文：https://www.cnblogs.com/yuesu/p/10113609.html