중첩 클래스를 확장하여 modernizr 등과 함께 사용

Question

저는이 문제에 대한 일관된 믹스를 만들기 위해 애를 쓰고 있습니다. 나는 현대적인 스타일 시트를 유지하기 위해 modernizr.js를 사용하여 기능을 탐지하고 있습니다. 중첩 된 구조에서 클래스를 푸시하고 modernizr이 입력 한 클래스를 확장하려고했습니다. 내가 추가해야합니다. m 추가 기능을 위해 Compass를 사용합니다. 지금까지이있다

.csstransitions, .csstransitions div, .csstransitions .some-class{ 
    -moz-transition-property: background; 
    -webkit-transition-property: background; 
    -o-transition-property: background; 
} 

하지만 생겼습니다 :

내가 달성을 기대하고있어 이것이다

.csstransitions{ 
    @include transition-property(background-image); 
} 
@mixin csstransitions($element:"div"){ 
    @extend .csstransitions(nest(".csstransitions",$element)); 
} 

아이디어는 내가 내에서 믹스 인을 호출 할 수 있다는 것입니다 CSS 구조 ... 감사합니다.

Answer 1

간단한 중첩이 여기에 충분해야한다고 생각합니다. 왜이 모든 복잡성이 믹스 인과 상속이 필요합니까?

div { 
    background-image: url(/images/foo.png); 
} 
.csstransitions div { 
    -moz-transition-property: background-image; 
    -webkit-transition-property: background-image; 
    -o-transition-property: background-image; 
    transition-property: background-image; 
} 

하지만이 최대한 멀리 볼 수, 당신도 모두이 범위 지정이 필요하지 않습니다 :

@import "compass/css3"; 
div { 
    background-image: url(/images/foo.png); 
    .csstransitions & { 
    @include transition-property(background-image); 
    } 
} 

이렇게하면 다음과 같은 출력을 제공 할 것입니다. 브라우저는 이해할 수없는 속성을 무시합니다. 그래서 다음을 제안합니다 :

@import "compass/css3"; 
div { 
    background-image: url(/images/foo.png); 
    @include transition-property(background-image); 
}