I also wanted to abstract out vendor prefixes but didn’t have compass available to me.
@mixin vendor-prefix($name, $value) {
@each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
#{$vendor}#{$name}: #{$value};
}
}
Sass:
* {
@include vendor-prefix('box-sizing', 'border-box');
}
Renders:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
Also see:
http://stefanwienert.net/blog/2012/05/18/easy-css-vendor-prefix-mixin-for-sass/