scss 选择器中的 & 是什么意思?
What does the & mean in an scss selector?
&
在 scss 选择器中指的是什么?
//Case 1
.parent {
& > ul {
color: red
}
}
//Case 2
.parent {
& > ul {
& > li {
color: blue;
}
}
}
//Case 3
.parent {
& > ul {
& > li {
color: blue;
&:hover {
color: pink
}
}
}
}
& 是父选择器的占位符:
.parent {
& > ul {
color: red
}
}
一样
.parent > ul {
color: red
}
一个常见的用例是伪 类,例如:
.link {
&:hover {
color: red
}
}
可以在 CSS Tricks 上找到带有示例的很好的解释。
&
在 scss 选择器中指的是什么?
//Case 1 .parent { & > ul { color: red } } //Case 2 .parent { & > ul { & > li { color: blue; } } } //Case 3 .parent { & > ul { & > li { color: blue; &:hover { color: pink } } } }
& 是父选择器的占位符:
.parent {
& > ul {
color: red
}
}
一样
.parent > ul {
color: red
}
一个常见的用例是伪 类,例如:
.link {
&:hover {
color: red
}
}
可以在 CSS Tricks 上找到带有示例的很好的解释。