如何在 SASS 中使用父选择器将类链接到元素 [重复]

Question

我正在尝试使用 SASS (scss) 执行以下操作。

.class {
  // Base class styles

  a.& {
    // Additions for when applied to a link
  }
}

但我得到一个编译器错误：

Invalid CSS after "a.": expected class name, was "&"

任何想法如何实现这一目标？ 目前我刚刚摆脱了嵌套，但它对我的情况来说不是最佳的。

谢谢！

Answer 1

从SASS 3.4 开始，您可以使用@at-root directive 将选择器范围限定为根。

此外，您还需要插入父选择器&，例如：a#{&}：

.class {
  // Base class styles

  @at-root a#{&} {
    color: #000;
  }
}

编译成：

a.class {
  color: #000;
}

---

值得一提的是@at-root下可以嵌套多个元素：

.class {
  // Base class styles

  @at-root {
    a#{&} {
      color: #f00;
    }
    p#{&} {
      float: left;
    }
  }
}

编译成：

a.class {
  color: #f00;
}
p.class {
  float: left;
}