通過使用自定義混合宏來處理 CSS 中未被支持或部分支持的瀏覽器前綴，是非常有吸引力的一種做法。但我們不希望這么做。首先，如果你可以使用[Autoprefixer](https://github.com/postcss/autoprefixer)，那就使用它。它會從你的項目中移除Sass代碼，會一直更新并一定會進行比你手動添加前綴更棒的處理。 不行的是，Autoprefixer 并不是總被支持的。如果你使用?[Bourbon](http://bourbon.io/)?或[Compass](http://compass-style.org/)，你可能就已經知道它們都提供了一個混合宏的集合，用來為你處理瀏覽器前綴，那就用它們吧。 如果你不能使用 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](https://github.com/postcss/autoprefixer) * [Building a Linear-Gradient Mixin](http://www.sitepoint.com/building-linear-gradient-mixin-sass/)