Sass: Browser vendor prefixes

Question

I am extremely new to Sass/Compass, so this question may sound dumb to many of you.

Anyway, what I need to know is how to create a mixin for browser vendor prefixes that I can reuse over and over without having to type them every time.

I've seen tutorials online but I just can't understand some of the concepts I need to be able to apply them correctly.

What I need right now is to accomplish this in CSS:

* {      -webkit-box-sizing:border-box;        -moz-box-sizing:border-box;                   -ms-box-sizing:border-box;           -o-box-sizing:border-box;              box-sizing:border-box;    } 

Thanks.

Answer 1

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/