使用“＆amp;”进行SCSS选择。高级技巧

Question

我有一个按钮类.btn，只想选择带链接的按钮。要添加到a的内容，以便我使用SCSS获得a.btn，我的代码如下所示？

SCSS：

.btn {
   background: red;

   a {
     background: blue;
   }
}

我想在css中得到这个：

.btn {
  background: red;
}

a.btn {
  background: blue;
}

逻辑将执行此操作a&。但它给出了一个错误。 a &和& a给出了不同的结果。

我知道这可以用@at-root a#{&}来完成，但它太丑了=）有没有一种漂亮的方式？

.btn {
   background: red;

   @at-root a#{&} {
     background: blue;
   }
}

Answer 1

这应该有效：

a {
    &.btn {
        background: blue;
    }
}

.btn {
    background: red;
}

你不能在一个块中写出来。如果那是你想要做的事情。

Answer 2

由于.btn&不是有效的scss，因此似乎@at-root a#{&}是您唯一的选择。