使用 Sass 的跨浏览器混合

【问题标题】：Cross browser mixin using Sass使用 Sass 的跨浏览器混合
【发布时间】：2013-10-21 12:06:51
【问题描述】：

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

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

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

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

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

【问题讨论】：

为什么要重新发明轮子？ Compass 已经为几乎所有需要前缀的属性提供了 mixins。许多 mixin 也有遗留支持（break-inside 等）

标签： css sass mixins

【解决方案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 这样的工具来添加前缀。

【讨论】：

这是生成不需要的属性的好方法。
使用 autoprefixer.github.io ，在这种情况下，您将避免使用 mixin 和 unessesery 前缀，因为很多属性在 -o 或 -ms 或 -moz 等上都不起作用