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

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

view plainprint?

1. $prefixes: -webkit- -moz- -ms- -o- '';  
2. @mixin vendorCss($key, $val){  
3.  @each $prefix in $prefixes{  
4.   #{$prefix}#{$key}: $val;  
5.  }  
6. }  
7.   
8. div {  
9.  @include vendorCss(transition, all 200ms ease-in-out);  
10. }  
11.   
12. ↓こうなる  
13. -webkit-transition: all 200ms ease-in-out;  
14. -moz-transition: all 200ms ease-in-out;  
15. -ms-transition: all 200ms ease-in-out;  
16. -o-transition: all 200ms ease-in-out;  
17. transition: all 200ms ease-in-out;  

$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;