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

你不能把它写在一个 block 中。如果这就是您想要做的。