하위 선택기가 아닌 클래스 조합 선택기로 후행 앰퍼샌드 (&)를 사용하십시오.

Question

클래스 .highlight을 여러 요소에 적용하고 요소 유형에 따라 스타일을 적용하고 싶습니다. 나는이 작업을 수행 할 수 있습니다 :

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

하지만 내 코드를보다 간결하게 후행 앰퍼샌드 (&)를 사용하는 것을 시도하고있다.

.highlight { 

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

그러나 나는 다음과 같은 오류 얻을 :

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

나는 또한 시도했다 :

나는 다음과 같은 노력했습니다

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

희망!

당신은 당신의하는 SCS 비트를 재구성해야

Answer 2

, 당신이 필요입니다

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