混合宏和瀏覽器前綴

通過使用自定義混合宏來處理 CSS 中未被支持或部分支持的瀏覽器前綴，是非常有吸引力的一種做法。但我們不希望這么做。首先，如果你可以使用Autoprefixer，那就使用它。它會從你的項目中移除Sass代碼，會一直更新并一定會進行比你手動添加前綴更棒的處理。

不行的是，Autoprefixer 并不是總被支持的。如果你使用?Bourbon?或Compass，你可能就已經(jīng)知道它們都提供了一個混合宏的集合，用來為你處理瀏覽器前綴，那就用它們吧。

如果你不能使用 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 是一個更好地選擇。

擴展閱讀

• Autoprefixer
• Building a Linear-Gradient Mixin