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

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);
}

Answer 2

I would encourage you to try writing your own mixins. Here is the one I am using for browser prefixes.

@mixin prefix ($prop, $val...)
  -webkit-#{$prop}: #{$val}
  -moz-#{$prop}: #{$val}
  -ms-#{$prop}: #{$val}
  #{$prop}: #{$val}

Then you can use it by simply typing (using box-sizing as an example):

+prefix (box-sizing, border-box)

Results in the following CSS:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

If you need to pass more than one value, you can use parentheses (useful for transitions):

+prefix (box-shadow, (0 2px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1))

Results in the following CSS:

-webkit-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
-moz-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
-ms-box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);
box-shadow: 0 2px rgba(0,0,0, 0.1), 0 0 0 1px rgba(0,0,0, 0.1);