以下是一些使用父选择器的例子：
1. 基本用法：
// 使用 & 引用父选择器
.button {
color: black;
&:hover {
color: red;
}
&.active {
background-color: yellow;
}
}
在这个例子中，& 符号被用于引用父选择器，生成完整的选择器规则，例如 .button:hover 和 .button.active。
2. 在嵌套规则中使用：
// 在嵌套规则中使用 & 引用父选择器
.container {
padding: 10px;
.item {
margin: 5px;
&:hover {
background-color: #eee;
}
}
}
在这个例子中，:hover 规则中的 & 引用了整个 .container .item 选择器，生成 .container .item:hover 的样式规则。
3. 动态生成选择器：
// 动态生成选择器
.generate-selectors(@selectors...) {
.loop(@index) when (@index > 0) {
// 使用 & 引用父选择器
&.@{selectors[@index]} {
color: red;
}
// 递归调用循环
.loop(@index - 1);
}
// 开始循环
.loop(length(@selectors));
}
// 调用生成选择器的 mixin
.generate-selectors(primary, secondary, tertiary);
在这个例子中，使用 mixin 动态生成选择器，通过 &.@{selectors[@index]} 创造了不同名称的选择器。
父选择器的使用使得在 Less 中嵌套规则更加强大和灵活，可以更容易地生成复杂的选择器。
转载请注明出处：http://www.zyzy.cn/article/detail/4300/Less