子孫セレクタではなく、クラスコンビネーションセレクタとして末尾のアンパサンド（＆）を使用してください。

Question

クラス.highlightをさまざまな要素に適用し、要素の種類に応じてスタイルを適用したいとします。私はこれを行うことができます：

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

しかし、私は私のコードはより簡潔にするために末尾にアンパサンド（&）を使用しようとしています。

私は次のことを試してみた：私も試した

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

：

.highlight { 

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

しかし、私は、次の取得を

.highlight { 

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

しかし、私は次のエラーを取得しますエラー：

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

これを回避する方法はありますか、これは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; 
} 

願っています！あなたはあなたが必要なものを、あなたのSCSSビットを再編成する必要が

Answer 2

は次のとおりです。

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

*あなたの更新後の編集、あなたはでルート@使用することができます。

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