Ricardo Zea Ricardo Zea - 1 year ago 101
Sass (Sass) Question

Sass: Browser vendor prefixes

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:

* {


Answer Source

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