less新手入门（五）—— CssGuards、循环、合并
2024-09-01 07:09:40
九、 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");
}
最新文章
- Gulp和Webpack工具的区别
- Android编译系统参考手册
- QML Image: Cannot open: qrc:///new.pic.png
- 理解Android虚拟机体系结构
- NSDate获取当前时间，并且转化为需要的格式
- [模仿][JS]新浪财经7*24直播
- linxu c语言 fcntl函数和flock函数区别 【转】
- MyEclipse开发JAX-RS架构WebServices收发JSON数据格式
- 划分分区GPT11
- 【转】 linux下的awk程序执行
- iOS 中的类属性
- 你不知道的JS之作用域和闭包（三）函数 vs. 块级作用域
- LNMP（三）
- VsCode源码编译运行
- Redis消息通知（任务队列和发布订阅模式）
- CentOs 自带 PHP 之坑
- 计蒜客 31451 - Ka Chang - [DFS序+树状数组][2018ICPC沈阳网络预赛J题]
- ES之七：配置文件详解
- kali虚拟机安装后操作[配置ssh,安装vmtools,更新源]
- 2809: [Apio2012]dispatching 可并堆 左偏树