如何使用SASS中的父选择器将类链接到元素

Question

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

QuerySource

但是我收到编译错误：

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

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

谢谢！

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;
}