扩展嵌套类以与modernizr等一起使用

Question

我一直在努力为这个问题创建一个连贯的mixin。我使用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

我觉得在这里简单的嵌套应该足够好，为什么你需要混合和继承的所有这些复杂？

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

这会给你以下的输出：

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); 
    @include transition-property(background-image); 
}