SASSで主要なブラウザのプリフィックスをつけるmixin

SASSで主要なブラウザ用にプリフィックスを付けるmixinを作ったのでメモ。

$prefixes: -webkit- -moz- -ms- -o- '';
@mixin vendorCss($key, $val){
 @each $prefix in $prefixes{
  #{$prefix}#{$key}: $val;
 }
}

div {
 @include vendorCss(transition, all 200ms ease-in-out);
}

↓こうなる
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;