引用父选择器需要用到“&”符号
＆运算符表示嵌套规则的父选择器，并且在修改类或伪类选择器的应用中非常普遍
ul{ li{ &:nth-child(2) a { color: red; &:hover { color: yellow; } } } } //编译为 ul li:nth-child(2) a { color: red; } ul li:nth-child(2) a:hover { color: yellow; } &也可以用在其他场景，例如产生重复的类名
.button{ &-submit{ color:blue; } &-click{ color:yellow; } &-btn{ color:red; } } //编译成 .button-submit { color: blue; } .button-click { color: yellow; } .button-btn { color: red; } .item{ &1{ color:green; } &2{ color:red; }}//编译成 .item1 { color: green;}.item2 { color: red;} .header{ &>p{ color:red; } &+.content{ color:yellow; } & div{ color:red; } &~p{ color:green; } &&{ color:green; } &>&{ color:blue; } } //编译成 .header > p { color: red; } .header + .content { color: yellow; } .header div { color: red; } .header ~ p { color: green; } .header.header { color: green; } .header > .header { color: blue; } 还可以改变选择器的顺序，将&后置，将当前的选择器提到父级
.side{ div&{ color:cyan; } } #side{ div&{ color:green; } } ul{ li{ .item{ div &{ color:orange; } } } } ／／ 编译为 div.side { color: cyan; } div#side { color: green; } div ul li .item { color: orange; } 当多个同级选择器用“，”隔开时，其子级使用连续多个&时，例如&+&或&-&等，会生成所有可能的组合
div,p,a,li{ &+&{ color:red; } } //编译为 div + div, div + p, div + a, div + li, p + div, p + p, p + a, p + li, a + div, a + p, a + a, a + li, li + div, li + p, li + a, li + li { color: red; }