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

  display: inline-block

  &.date

    width: 50px

＆符是父选择器的占位符。而且，如果您没有在嵌套选择器中放置空格，它将输出一个串联的选择器（正是您想要的）。

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