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

Answer 2

以下 scss 可以解决问题：

.card{

    .section{

        .item{

            &+.item{
            }
        }
    }
}

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

2 个答案: