sass - 在选择器列表中使用 @at-root 和 &

Question

我有一个 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 在逗号之后需要一个选择器并得到一个 @...

Answer 1

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

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

如果它绝对必须在最后(例如，您正在使用元素或伪选择器)，最简单的解决方案是使用扩展:

%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 .dropdown-toggle.btn-primary {
  color: red;
}