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