SASS如何使用＆符添加类到标签？

Question

如何编写这些sass声明，使其编译为a.btn_primary_cancel

我尝试了这个，但它不起作用：

.btn_primary_cancel {

  a& {
    line-height: 4rem;
  }

}

Answer 1

应该是：

a {
  &.btn_primary_cancel {
    line-height: 4rem;
  }
}

将编译为：

a.btn_primary_cancel {
  line-height: 4rem;
}

Answer 2

  

是的!!您可以获得所需的结果。只需使用@at-root

即可

试试这段代码。

.btn_primary_cancel {
  @at-root a#{&} {
    line-height: 4rem;
  }
}

它将编译为

a.btn_primary_cancel {
  line-height: 4rem;
}

请参阅此操作 - CODEPEN

Answer 3

如果你将＆符号括在＃{＆amp;}中会起作用，但不会像你想象的那样。

因为在类声明中，它将创建以下内容：

.btn_primary_cancel a.btn_primary_cancel {
  line-height: 4rem;
}

输出到：

{{1}}

这就是说，我不认为你能做你要求的事。 CSS层次结构根本就不起作用。