css - 如何在SASS、SCSS中实现直接父选择器？

Question

我的 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{
        }
    }
}

Answer 1

& 是父选择器，你不能使用两个 & 因为那样你会超出范围。在那种情况下，只需向上一个街区。

例如:

#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 一个代码块。

DOCUMENTATION: Referencing Parent Selectors: &