3

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

我怎样才能做到这一点?

4

1 回答 1

3

&

您可以使用&运算符实现此目的。尝试:

.a .c
  display: inline-block

  &.date
    width: 50px

& 号是父选择器的占位符。如果你没有在嵌套选择器中放置一个空格,它将输出一个连接的选择器(正是你想要的)。

演示


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

于 2013-11-12T20:45:47.380 回答