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