不行的是,Autoprefixer 并不是总被支持的。如果你使用 Bourbon 或Compass,你可能就已经知道它们都提供了一个混合宏的集合,用来为你处理浏览器前缀,那就用它们吧。
如果你不能使用 Autoprefixe,甚至也不能使用 Bourbon 和 Compass,那么接下来唯一的方式,就是使用自己的混合宏处理带有前缀的 CSS 属性。但是,请不要为每个属性建立混合宏,更不要无脑输出每个浏览器的前缀(有些根本就不存在)。
// Nope
@mixin transform($value) {
-webkit-transform: $value;
-moz-transform: $value;
transform: $value;
}
比较好的做法是
/// Mixin helper to output vendor prefixes
/// @access public
/// @author HugoGiraudel
/// @param {String} $property - Unprefixed CSS property
/// @param {*} $value - Raw CSS value
/// @param {List} $prefixes - List of prefixes to output
@mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes {
-#{$prefix}-#{$property}: $value;
}
#{$property}: $value;
}
然后就可以非常简单地使用混合宏了:
.foo {
@include prefix(transform, rotate(90deg), ('webkit', 'ms'));
}
请记住,这是一个糟糕的解决方案。例如,他不能处理那些需要复杂的前缀,比如 flexbox
。在这个意义上说,使用 Autoprefixer 是一个更好地选择。