SASS 중첩 된 선택기 복제

Question

프로젝트 용으로 SASS를 사용하고 있으며 지금까지 꽤 만족합니다. 그러나 IE 7 이하에서만 표시해야하는 코드가 있으므로 .ie-lt8 클래스 이름을 사용하십시오. 하지만 내가 SASS에서 선택기를 확장하면 중첩 된 선택기와 함께 여러 선택기를 만듭니다.

예 (IE에 대한 display: inline-block 코드를 확장) :

SASS는

/* My extension code */ 
.ie-lt8 %ie-inline-block { 
    display: inline; 
    zoom: 1; 
} 

/* I want the li to be inline-block */ 
#my-ul li { 
    display: inline-block; 
    @extend %ie-inline-block; 
} 

CSS이는 잘하지만 #my-ul .ie-lt8 li 나에게 조금 걱정 일반적으로

/* My extension code */ 
.ie-lt8 #my-ul, #my-ul .ie-lt8 li { 
    display: inline; 
    zoom: 1; 
} 

/* I want the li to be inline-block */ 
#my-ul li { 
    display: inline-block; 
} 

를 생산했다. 이 예제에서는 코드가 두 선택기 모두에서 제대로 작동하므로 괜찮습니다 (언급 된 선택기가 존재하지 않음). 그러나 선택기가 중요한 다른 코드가 있으면 문제가 발생할 수 있습니다. 이

/* I want the div to get a red border, 
    but the div inside .container to have a green border */ 
#myid .container div { border: 5px dotted green; } 

/* My extension code */ 
.container #myid div, #myid .container div { 
    border: 1px solid red; /* [OVERRIDE OF THE BORDER] */ 
} 

내 문제는 그 다음이다 생산할 것

SASS

/* I want the div to get a red border, 
    but the div inside .container to have a green border */ 
#myid .container div { border: 5px dotted green; } 
#myid div { 
    @extend %red-border; 
} 

/* My extension code */ 
.container %red-border { 
    border: 1px solid red; 
} 

CSS;

A는 예를 생각 중첩 된 선택자 (하나의 문장에서 많은 선택자)에서 여러 선택자를 만들지 않고 SASS 만 초기 선택기 만 사용하도록 만드는 방법이 있습니까?

나는이 문제에 대해 소홀히했으나 기사/블로그/등을 찾기가 어렵다. 이 문제에 관해서.

UPDATE

나는 그런 대신 @ 믹스 인의를 사용하여 다양한 해결 방법, 알고 있어요. 나는 SASS를 무시한 것이 있는지 또는 누군가가 왜 이것이라고 말할 수 있는지 궁금해하고있었습니다. 왜냐하면 그것은 저에게 버그 같아 보입니다.

다음과 같이 대상 브라우저를

, 나는 또한 유지 mixin을 사용하는 것이 좋습니다, 그리고 것입니다 ... 그래서 당신은 변환해야하지 SASS - -

Answer 1

내 대답은 SCSS에 @content을 내 @ 원하는 결과를 얻으려면 mixin하십시오. 또한 문맥을 통해 이해할 수있는 일련의 규칙을 설정합니다.

예를 들어 클래스로만 선언하는 대신 인라인 블록 수정을 mixin으로 옮기는 것만 큼 간단합니다.

@mixin ie7-inline-block { 
    display: inline; 
    zoom: 1; 
} 

#my-ul li { 
    display: inline-block; 
    .ie-lt8 & { 
     @include ie7-inline-block; 
    } 
} 

이 생각보다 더 좋은 @content를 사용하여, 당신은 항상 같은 믹스 인을하여 스타일이 .IE - lt8로 시작되도록 할 수 있습니다

@mixin ie7 { 
    .ie-lt8 & { 
     @content; 
    } 
} 

#my-ul li { 
    display: inline-block; 
    @include ie7 { 
     display: inline; 
     zoom: 1; 
    } 
} 

출력합니다을 같은 CSS지만 IE7 특정 스타일을 코드를 읽는 사람이라면 누구나 이해할 수있는 상황에서 랩핑 할 수 있습니다.