Sass mixin預先添加到選擇器

是否有可能使SASS mixin將其輸出預先添加到選擇器？我使用Modernizr來檢查瀏覽器的svg功能。當支持svg時，它將svg類輸出到<html>元素。Sass mixin預先添加到選擇器

我希望background-image根據svg能力而變化。基本上，這是我需要的：

.container .image { background-image: url('some.png'); } 
html.svg .container .image { background-image: url('some.svg'); }

我想在我的SCSS是一個mixin，我可以通過以下方式@include：

.container { 
    .image { 
    background-image: url('some.png'); 
    @include svg-supported { 
     background-image: url('some.svg'); 
    } 
    } 
}

不必編寫的：

.container { 
    .image { 
    background-image: url('some.png'); 
    } 
} 

@include svg-supported { 
    .container { 
    .image { 
     background-image: url('some.svg'); 
    } 
    } 
}

這是可能以某種方式？

來源

2013-10-24 RJo

找到了答案here。

可以通過使用符號&符號。作爲參考，在這種情況下，需要混入是

@mixin svg-supported { 
    html.svg & { 
    @content; 
    } 
}

這可以通過以下方式來使用：

.image { 
    background-image: url('some.png'); 
    @include svg-supported { 
    background-image: url('some.svg'); 
    } 
}

來源

2013-10-24 10:22:18 RJo

FYI：這是偉大的，當你想要做的就是添加另一個類修改器一個選擇器的_content_。如果你想把這個類修飾符（或者一個新的選擇符）預先加入到選擇器的鏈/層次結構中，那麼看起來你運氣不好 - 參見http://stackoverflow.com/questions/23230430/how-to-modify-的根父選擇器功能於SASS – peteorpeter

Sass mixin預先添加到選擇器

回答

相關問題