Sass: Browser vendor prefixes

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/

Sounds like you want to use the Compass box-sizing mixin. Your SASS file would look like this:

@import "compass/css3/box-sizing";

* {
    @include box-sizing(border-box);
}

And would compile to this:

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

You can see the other CSS3 Compass mixins here. Note, though, that Compass doesn't include prefixes like -ms-box-sizing, for instance, since IE8+ has implemented it without a prefix. If you really want those extra properties, this is how you'd do it:

@import "compass/css3/shared"

* {
    @include experimental(box-sizing, border-box, -moz, -webkit, -o, -ms, not -khtml, official);
}