在SCSS中,使用&符号来引用父选择器,在嵌套规则中使用父选择器。这样可以避免重复编写选择器,并且在生成的CSS中保持正确的层级关系。
以下是一个示例,展示了如何在嵌套规则中使用父选择器:
.button {
background-color: blue;
&:hover {
background-color: darkblue;
}
&.active {
background-color: red;
}
.icon {
color: white;
font-size: 16px;
}
}
在上面的示例中,.button选择器是父选择器。在嵌套规则中,使用&引用父选择器。
- &:hover表示当鼠标悬停在.button元素上时,应用这个样式。
- &.active表示当.button元素有.active类时,应用这个样式。
- .icon表示嵌套在.button元素内的.icon元素,不使用&引用父选择器。 在编译为CSS后,生成的代码如下:
.button {
background-color: blue;
}
.button:hover {
background-color: darkblue;
}
.button.active {
background-color: red;
}
.button .icon {
color: white;
font-size: 16px;
}
通过使用&引用父选择器,可以编写更具可读性和维护性的代码。
父选择器的引用可以嵌套在任何层级的规则中,并且可以与其他选择器和修饰符组合使用。
标签:color,button,嵌套,background,规则,active,选择器 From: https://blog.51cto.com/u_15315508/8086447