使用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;

}

但这是行不通的。浏览器希望“日期”和“字符串长”嵌套在“ c”类下，而不是它们都存在于同一HTML标记中。

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

.a .c {

    display: inline-block;

}

.a .c.date {

    width: 50px;

}

我怎样才能做到这一点？

Answer 1

您可以使用＆运算符实现此目的。尝试：.a .c&nbsp; display: inline-block&nbsp; &.date&nbsp; &nbsp; width: 50px＆符是父选择器的占位符。而且，如果您没有在嵌套选择器中放置空格，它将输出一个串联的选择器（正是您想要的）。注意：在更深的嵌套选择器中，&代表嵌套选择器的整个路径，而不仅仅是直接父级。