我的 HTML 布局如下:
<div class="card">
<div class="section">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
编译后的 CSS 应如下所示:
.card{
}
.card .section .item{
}
.card .section .item+.item{
}
我在 SCSS 中写的内容:
.card{
.section{
.item{
&+&{
}
}
}
}
我们能不能有像& + &
这样的东西,它不起作用,我不想写,
.card{
.section{
.item{
}
.item+.item{
}
}
}
最佳答案
&
是父选择器,你不能使用两个 &
因为那样你会超出范围。在那种情况下,只需向上一个街区。
例如:
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; } /* Look at notes below */
}
}
编译为
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover { /* parent selector is replaced :D */
color: red; }
如果您相邻地使用两个 &
,您将在父级的父级中,这没有意义,因为您可以在层次结构中编写 sass 或 scss 一个代码块。
关于css - 如何在SASS、SCSS中实现直接父选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27937089/