使用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

回答

相关问题