擴展嵌套類以與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); 
}