使用尾随＆符号（＆amp;）作为类组合选择器，而不是后代选择器

Question

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

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

但我正在尝试使用尾随＆符号（＆amp;）来使我的代码更简洁。

我尝试了以下内容：

.highlight {

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

但是我收到以下错误：

  

错误：属性“input”必须后跟'：'

我也试过了：

.highlight {

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

但是我收到以下错误：

  

“[type =”text“]之后的无效CSS：”expected“{”，是“＆amp;”   “＆安培;”只能在复合选择器的开头使用。

有没有办法绕过这个，或者这不能在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;
}

希望这有帮助！

Answer 2

你需要重新整理你的scss，你需要的是：

AppModule

*更新后编辑，您可以使用@ at-root：

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