less新手入门（五）—— CssGuards、循环、合并

九、 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");
}