使用 SASS 连接嵌套类 [重复]

Posted 2023-03-06

【中文标题】使用 SASS 连接嵌套类 [重复]

【英文标题】：Concatenating nested classes using SASS [duplicate]

【发布时间】：2013-11-25 04:53:05

【问题描述】：

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

我该怎么做？

【参考方案1】：

&

您可以使用ampersand 运算符实现此目的。试试：

.a .c
  display: inline-block

  &.date
    width: 50px

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

DEMO

---

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