CSS 프리 프로세서를 사용하여 다른 클래스 이름의 자식 선택자에 확장 스타일을 적용하는 방법은 무엇입니까?

Question

Bootstrap classNames를 접두어로 사용해야합니다. 나는 래퍼로 .my-prefix .bs-class을 사용하는 것을 의미하지는 않는다. 실제로 BS classNames 앞에 접두사를 붙이는 것을 의미한다. .my-bs-class.

나는 (Gulp 프로세스를 사용하여) 프로그래밍 방식으로이 작업을 수행해 보았지만 선택자 중 일부는 믹스 인 복잡성을 처리하는 대신 안전하게 변환하기에는 조금 복잡합니다.

그래서 LESS 기능을 사용하여 BS를 확장하는 것에 대해 궁금해했으며 간단한 사용 사례로도이 기능이 잘 작동합니다.

// BS 
.btn { 
    color:red; 
} 
// Prefixed BS 
.my-btn { 
    &:extend(.btn); 
} 

중첩 된 선택자를 사용하여 동일한 작업을 수행해도 좋지 않을 것으로 예상됩니다. http://codepen.io/davewallace/pen/MJrMVj 당신은 그러나 CSS의 출력은, 내가 일어날 싶은 것이 간단한 예를 볼 수 있습니다 :

.btn-group .btn, 
.ui-btn-group .btn { 
    color: red; 
} 

반대 :

이 codepen 촬영

.btn-group .btn, 
.ui-btn-group .ui-btn { 
    color: red; 
} 

을 무엇인가 I 가능한 경우 달성하기 위해 노력하고 있습니까?

참고 : BS 접두사에 대한 대체 접근법에 대해 열려 있지만 BS 소스를 수정하여 발생하는 기술적 빚은 최소화하지 않는 한 가장 바람직하지 않습니다.

편집 : 나는 다른 기술이 그것을 달성 할 수 있다면, 자신을 덜 (LESS)으로 제한하지 않기 위해 모든 CSS 전처리기를 포함하도록이 질문을 넓혔다.

Answer 1

아니요. 내 대답은 공식적으로 "접두사 및 구성 요소 격리를 지원하는 프레임 워크로 전환"으로 구성되어 있습니다. 우리는 UIKit을 선택했습니다.