如何在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{
}

我在 S 中写的内容CSS:

.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: &

Answer 2

以下 scss 成功了：

.card{

    .section{

        .item{

            &+.item{
            }
        }
    }
}

如何在SASS, SCSS中实现直接父选择器？

How to implement immediate parent selector in SASS, SCSS?

css

sass

css-selectors