使用SASS连接嵌套类

Question

我正在尝试使用SASS的嵌套功能来连接两个类，但是无法弄清楚如何实现。

以下是HTML代码：

<section class="a">
    <div class="b">
        <div class="c date">some date</div>
    </div>
</section>

以下是我的当前SASS：

.a .c
    display: inline-block

    .date
        width: 50px

它会生成以下的CSS：

.a .c {
    display: inline-block;
}
.a .c .date {
    width: 50px;
}

但是这样不起作用。浏览器期望"date"和"string-long"嵌套在"c"类别下，而不是它们同时存在于同一个HTML标签中。

我需要的是这个（.c和.date之间没有空格 => .c.date）：

.a .c {
    display: inline-block;
}
.a .c.date {
    width: 50px;
}

我该如何做到这一点？

- SimonW

Answer 1

&

您可以使用 与 运算符来实现。尝试一下：

.a .c
  display: inline-block

  &.date
    width: 50px

和符号是父选择器的占位符。如果在嵌套选择器中不在它后面放置空格，它将输出一个连接的选择器（正是你想要的）。

演示

---

注意：在更深层嵌套的选择器中，&代表整个嵌套选择器路径，而不仅仅是直接父级。

- Martin Turjak