sass - 使用 SASS 连接嵌套类

标签 sass

<分区>

我正在尝试使用 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;
}

我该怎么做？

最佳答案

&

您可以使用 ampersand 实现此目的运算符(operator)。尝试:

.a .c
  display: inline-block

  &.date
    width: 50px

& 符号是父选择器的占位符。如果您在嵌套选择器中没有在它后面放置一个空格，它将输出一个串联的选择器(正是您想要的)。

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

关于sass - 使用 SASS 连接嵌套类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19939368/

相关文章：

CSS 按钮悬停使文本闪烁