使用Sass的跨瀏覽器mixin

我對Sass非常陌生，所以我還不完全瞭解它的一切。使用Sass的跨瀏覽器mixin

我的想法是，我創建一個mixin像這樣;

@mixin crossBrowser($css) { 
    -webkit-+$css; 
    -moz-+$css; 
    -o-+$css; 
    $css; 
}

然後@include crossBrowser("transition: 0.2s ease-out");使用它。

我想你可以看到我想要去的地方，可能嗎？或者我必須爲每個我想包含的CSS3屬性創建一個新的mixin？

來源

2013-10-13 Unidan

爲什麼要重新發明輪子？ [Compass]（http://compass-style.org/）已經爲每個需要前綴的屬性提供了mixins。許多mixin也具有傳統支持（內置入侵等） – cimmanon

解決它這樣;

@mixin crossBrowser($property, $css) { 
    -webkit-#{$property} : $css; 
    -moz-#{$property} : $css; 
    -o-#{$property} : $css; 
    #{$property} : $css; 
}

然後通過@include crossBrowser(transition, 0.2s ease-out);

早期的2017年編輯

稱它現在應該寫你的CSS 沒有供應商前綴，然後使用工具，如https://autoprefixer.github.io添加前綴。

來源

2013-10-13 23:43:12 Unidan

這是生成您不需要的屬性的一種非常好的方法。 – cimmanon

使用https://autoprefixer.github.io/，在這種情況下，您將避免使用mixin和unessesery前綴作爲許多屬性不會在-o或-ms或-moz等等 – fearis

使用Sass的跨瀏覽器mixin

回答

相關問題