less中的&符号
在 Less 预处理器中，& 符号用于引用当前选择器的父级。这在嵌套规则中非常有用，可以帮助生成更复杂的选择器，而不需要重复父选择器的名称。
基本用法
在 Less 中，& 符号代表父选择器，可以用来构建更复杂的选择器规则。例如：
1
2
3
4
5
6
7
8
9
10
11
| .container {
color: black;
&:hover {
color: blue;
}
&::before {
content: "Prefix";
}
}
|
编译后的 CSS 如下：
1
2
3
4
5
6
7
8
9
| .container {
color: black;
}
.container:hover {
color: blue;
}
.container::before {
content: "Prefix";
}
|
具体示例
以下是一些常见的 & 符号用法示例：
1. 伪类和伪元素
1
2
3
4
5
6
7
8
9
10
11
| .button {
background-color: green;
&:hover {
background-color: darkgreen;
}
&::after {
content: " (hover me)";
}
}
|
编译后的 CSS：
1
2
3
4
5
6
7
8
9
| .button {
background-color: green;
}
.button:hover {
background-color: darkgreen;
}
.button::after {
content: " (hover me)";
}
|
2. 子选择器
1
2
3
4
5
| .nav {
&-item {
color: red;
}
}
|
编译后的 CSS：
1
2
3
| .nav-item {
color: red;
}
|
3. 父选择器引用
1
2
3
4
5
6
7
8
9
| .list {
.list-item {
color: blue;
&.active {
color: darkblue;
}
}
}
|
编译后的 CSS：
1
2
3
4
5
6
| .list .list-item {
color: blue;
}
.list .list-item.active {
color: darkblue;
}
|
4. 嵌套媒体查询
1
2
3
4
5
6
7
8
9
| .container {
width: 100%;
@media (min-width: 768px) {
& {
width: 50%;
}
}
}
|
编译后的 CSS：
1
2
3
4
5
6
7
8
| .container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 50%;
}
}
|
总结
& 符号在 Less 中非常强大，可以帮助你避免重复代码，并使样式表更具可读性和可维护性。通过合理使用 & 符号，可以轻松创建复杂的选择器规则，提升 CSS 编写的效率和灵活性。
