使用尾部与号 (&) 作为类组合选择器，而不是后代选择器

Question

我想将一个类.highlight应用于一堆不同的元素，并根据元素类型对它们进行样式设置。我可以这样做：

input[type="text"].highlight {...}
select.highlight {...}
someOtherSelector.hightlight {...}

但我正在尝试使用尾随符号 (&) 使我的代码更加简洁。

我尝试了以下方法：

.highlight {

    input[type="text"].& {
        border: 1px solid $brand-purple;
    }
}

但我收到以下错误：

错误：属性“输入”后必须跟一个“：”

我也试过：

.highlight {

    input[type="text"]& {
        border: 1px solid $brand-purple;
    }
}

但我收到以下错误：

"[type="text"]" 之后的无效 CSS: 预期为 "{", was "&" "&" 只能在复合选择器的开头使用。

有没有办法解决这个问题，或者这不能在 SASS 中完成？

Answer 1

使用#{&}而不仅仅是.&. 并使用@at-root它允许您完全脱离嵌套结构到嵌套树的“根”。

用 SASS 写这个：

.highlight {

  @at-root input[type="text"]#{&} {
      border: 1px solid $brand-purple;
  }
}

这将在 CSS 中符合：

input[type="text"].highlight {
  border: 1px solid purple;
}

希望这可以帮助！