Sass를 통해 이중 선택기로 특이도를 높이십시오

Question

스택 오버플로 in another question 및 MDN tells about the specificity 선택기에서 언급했듯이 Sass를 통해 선택기의 무게를 약간 늘려 일부 기존 스타일을 무시하고 싶습니다. 다음은 (컴파일 된) CSS의 예입니다.

.parent .parent__child.parent__child { color: red; } 

는 그냥 선택기로 .parent .parent__child를 사용하는 것보다 더 구체적이다.

---

나는 Sass를 통해이를 수행 할 수있는 방법이 있지만,이 방법을 더 잘 수행해야한다고 생각합니다. 지금이 권리를 수행하는 방법은 다음과 같습니다

.parent { 
    &__child.parent__child { color: red; } 
} 

이상적으로,이 (가 아이 선택하지 이후 앰퍼샌드 직접 서로에 부착되는 한) 최상의 설정 될 것이다 :

.parent { 
    &__child&__child { color: red; } 
} 

'child'선택자 사이에 점을 추가하는 것뿐만 아니라 오류가 발생합니다. Sass documentation은이 특별한 경우에 대해서는 아무 말도하지 않습니다. 이것을 달성하는 방법에 대한 아이디어가 있습니까?

편집

내가 보간 브래킷 방법에 대해 알고 있지만, 선택은 예를 들어, 4 명 중 3 층 깊이 세에 깊은 무슨 경우? 부모 선택기가 중복 되기만을 원합니다. 전체 선택기 트리가 아닙니다.

Answer 1

이후 보간 브래킷을 사용 특이성을 두 배로위한 SASS에서 특별한 트릭 (here 및 here이 더 많은)이있어 두 &의 서로 무효 SASS 구문입니다 옆에. 이 우연히 덜 사용하는 분들을 위해

.parent { 
    &__child { 
    &#{&} { 
     color: red; 
    } 
    } 
} 

// compiles to 
// .parent__child.parent__child { color: red; } 

// You can also do this with deeper nested elements by 
// prefacing the interpolation with the ancestor selectors: 
.parent { 
    &__child { 
    .some .ancestor .elements &#{&} { 
     color: red; 
    } 
    } 
} 

// compiles to 
// .some .ancestor .elements .parent__child.parent__child { color: red; } 

두 번 && '를들 수 있습니다 :

.parent { 
    &__child { 
    && { 
     color: red; 
    } 
    } 
}