混合宏和浏览器前缀

2018-02-24 15:11 更新

通过使用自定义混合宏来处理 CSS 中未被支持或部分支持的浏览器前缀,是非常有吸引力的一种做法。但我们不希望这么做。首先,如果你可以使用Autoprefixer,那就使用它。它会从你的项目中移除Sass代码,会一直更新并一定会进行比你手动添加前缀更棒的处理。

不行的是,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 是一个更好地选择。

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号