css - 使用 Sass 的跨浏览器混合

Question

我对 Sass 很陌生，所以我还不太了解它。

我的想法是像这样创建一个mixin；

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

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

我想你可以看到我想去哪里，这可能吗？或者我是否必须为我想要包含的每个 CSS3 属性创建一个新的 mixin？

Answer 1

像这样解决它；

@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这样的工具来添加前缀。