使用尾随&符（&）作为类组合选择器，而不是后代选择器 [英] Use trailing ampersand (&) as a class combination selector, not a descendant selector

问题描述

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

I want to apply a class .highlight to a bunch of different elements and style them according to the element type. I could do this:

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

我尝试过以下操作：

.highlight {

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

但我得到以下错误：

错误：属性input必须后跟一个'：'

Error: property "input" must be followed by a ':'

我也试过：

.highlight {

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

但我得到以下错误：

在[type =text]之后无效的CSS：expected{，was&
&只能在复合选择器的开头使用。

Invalid CSS after "[type="text"]": expected "{", was "&" "&" may only be used at the beginning of a compound selector.

有没有办法解决这个问题， SASS？

Is there a way around this, or can this just not be done in SASS?

推荐答案

使用 ＃{&} / strong>，而不只是 。& 。并使用 @ at-root ，您可以将嵌套结构完全分离到嵌套树的根。

Use #{&} instead of just .&. And use @at-root which allows you to break out of your nesting structure entirely to the "root" of your nesting tree.

在SASS中撰写：

.highlight {

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

/ strong>

This will complied in CSS to:

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

希望这有助！

这篇关于使用尾随&符（&）作为类组合选择器，而不是后代选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！