以下是一个简单的例子:
// 合并选择器
.button {
color: black;
&:hover {
color: red;
}
&.active {
background-color: yellow;
}
&.disabled {
opacity: 0.5;
}
}
在这个例子中,& 符号用于合并选择器,生成完整的选择器规则。例如,.button:hover 将生成按钮在悬停状态时的样式。
另外,你还可以在嵌套规则中使用 & 符号引用整个父选择器:
// 使用 & 引用整个父选择器
.container {
padding: 10px;
.item {
margin: 5px;
}
&:hover {
background-color: #eee;
}
}
在这个例子中,:hover 规则中的 & 引用了整个 .container 选择器,生成 .container:hover 的样式规则。
合并选择器是 Less 中一种强大的功能,它使得样式表的书写更加简洁和灵活。
转载请注明出处:http://www.zyzy.cn/article/detail/4299/Less