九、 CssGuards

警卫也可以应用于css选择器，这是一种语法糖，用于声明mixin，然后立即调用它。

例如，在1.5.0之前，您必须这样做

.my-optional-style() when (@my-option = true) {
     button {    color: white;  }}.my-optional-style();

在目前的版本上，你可以直接把它写在样式上

button when (@my-option = true) {
     color: white;}

您还可以通过将其与&特性组合在一起来实现“if”类型的语句，从而允许您组织多个守护程序。

& when (@my-option = true) {
     button {    color: white;  }  a {
       color: blue;  }}

 

十三、父选择符

• 引用父选择器与&

操作符 & 表示嵌套规则的父选择符，并且在将修改类或伪类应用于现有选择器时最常用:

a {
     color: blue;  &:hover {    color: green;  }}

输出：

a {
     color: blue;  &:hover {    color: green;  }}

注意，如果没有&，上面的例子会导致a :hover规则（一个后代选择器匹配<a>标签内部的悬停元素），这不是我们通常想要嵌套的:hover。

“父母选择器”操作符 & 有多种用途。基本上任何时候都需要嵌套规则的选择器以默认的方式进行组合。例如，另一个典型的用法&是产生重复的类名：

.button {
     &-ok {    background-image: url("ok.png");  }  &-cancel {
       background-image: url("cancel.png");  }  &-custom {
       background-image: url("custom.png");  }}

输出：

.button-ok {
     background-image: url("ok.png");}.button-cancel {
     background-image: url("cancel.png");}.button-custom {
     background-image: url("custom.png");}