Sass 使用@at root和&；在选择器列表中

我有一个CSS，我尝试使用许多类似的结构移动到SASS

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
...
}

为此：

 .btn-primary {
    ...
    &:hover,
    &:focus,
    &:active,
    &.active,
    .open .dropdown-toggle#{&} {

我显然明白：

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary .open .dropdown-toggle.btn-primary {
...
}

但我似乎不被允许使用@at root：

 .btn-primary {
    ...
    &:hover,
    &:focus,
    &:active,
    &.active,
    @at-root .open .dropdown-toggle#{&} {

---

因为SASS需要在逗号之后有一个选择器，并得到一个@…

根目录下的

@at

指令不能以这种方式使用。它旨在应用于整个选择器，而不是列表中的单个选择器。由于选择器都是类，因此您可以将父选择器重新定位到开头，而不是尝试将其附加到结尾：

.btn-primary {
    &:hover,
    &:focus,
    &:active,
    &.active,
    .open &.dropdown-toggle {
      color: red;
    }
}

输出：

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .btn-primary.dropdown-toggle {
  color: red;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  color: red;
}

如果绝对必须在末尾（例如，您使用的是元素或伪选择器），最简单的解决方案是只使用extends：

%common {
    color: red;
}

.btn-primary {
    &:hover,
    &:focus,
    &:active,
    &.active {
        @extend %common;
    }

    @at-root .open .dropdown-toggle#{&} {
        @extend %common;
    }
}

输出：

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .btn-primary.dropdown-toggle {
  color: red;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  color: red;
}

---

@Brett DeWoody：我没有添加CSS标签是有原因的。问题是所有关于SASS的。当然，SASS与CSS有关，但是出于这个原因，每个SASS问题都需要一个CSS标签，而这不是我们的想法。另一方面：这个问题不可能由任何只懂CSS的人来回答——而每个懂SASS的人都懂CSS。所以：这个问题是一个纯粹的SASS问题，不需要CSS标签。