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/

Answer 2

Here is my sass solution to deal with vendor prefixes: https://github.com/Aloge/sass-prefixer

It is similiar to @rimian's solution but you only need to include a mixin with the css property and its value and it automatically renders the css with the vendor prefixes necessary. So this:

* {
  @include prefix(box-sizing, border-box)
}

renders:

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

but this:

* {
  @include prefix(display, flex)
}

renders:

* {
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

It's still in beta and it may have bugs but I'm working to improve it and include new features

Answer 3

My Version for single or multiple declarations

//prefix vendors
$prefixes: (
    'webkit', 'moz'
);

//prefix mixin
@mixin prefix($declarations: ()) {
    @each $property, $value in $declarations {
        @each $prefix in $prefixes {
            #{'-' + $prefix + '-' + $property}: $value;
        }
        #{$property}: $value;
    }
}

Usage for multiple declarations

@include prefix((animation-name:fadeInDown,animation-duration: 1s));

Usage for single declaration

 @include prefix((animation-name:fadeInDown));

Answer 4

I think you should use Autoprefixer so you don't have to worry about browser prefixes anymore. Autoprefixer uses the data base of caniuse.com. I recommand you to start using Grunt or Gulp then plugin Autoprefixer as a task it will re-compile the css and spits out needed browser prefixes for you.

Answer 5

Complete Advance Solution

Variables :: CREATE vars with all or usable prefixes

/* CREATE vars with all or usable prefixes */
$all-vendors: (
    'webkit','apple','khtml',
    'moz','rim','xv',
    'ms','o'
);

$using-vendors: (
    'webkit', 'moz', 'ms', 'o'
);

Actual Mixing Functions :: Mixin for multiple declarations && Mixin for multiple declarations

/** Mixin for multiple declarations **/
@mixin prefs($declarations, $prefixes: ()) {
 @each $property, $value in $declarations {
   @each $prefix in $prefixes {
     #{'-' + $prefix + '-' + $property}: $value;
   }
   #{$property}: $value;
 }
}

/** Mixin for single property to be prefixed **/
@mixin pref($property, $value, $prefixes){
    @each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
    }
    #{$property}: $value;
}

###Actual Usage :: use @include in any selector

Example of Multiple

/** Prefixes usage **/
.selector {
  @include prefs((
    column-count: 3,
    column-gap: 1.5em,
    column-rule: 2px solid hotpink
  ), $using-vendors);
}

Example of Single pref mixin

.cc3 {
    @include pref(column-count,3,webkit moz ms);
} 
.ccc4 {
    @include pref(column-count, 4, $all-vendors);
}

Finally after compiling using SASS compiler

output

.selector {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1.5em;
  -moz-column-gap: 1.5em;
  -ms-column-gap: 1.5em;
  column-gap: 1.5em;
  -webkit-column-rule: 2px solid hotpink;
  -moz-column-rule: 2px solid hotpink;
  -ms-column-rule: 2px solid hotpink;
  column-rule: 2px solid hotpink; }

.cc3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3; }

.ccc4 {
  -webkit-column-count: 4;
  -apple-column-count: 4;
  -khtml-column-count: 4;
  -moz-column-count: 4;
  -rim-column-count: 4;
  -xv-column-count: 4;
  -ms-column-count: 4;
  column-count: 4; }

other option is to use Koala, just enable auto-Prefix and it will work like charm.

you can download it from here.

*or use grunt build system. *

Answer 6

$vendors: (
    '-webkit-','-apple-','-khtml-',
    '-moz-','-rim-','-xv-',
    '-ms-','-o-',''
);
@mixin pref($prop,$val...) {
    @each $key in $vendors {
        #{$key}#{$prop}:$val;
    }   
}
selector {
    @include pref(box-sizing,border-box);
}

renders like this:

selector {
    -webkit-box-sizing: border-box;
    -apple-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -rim-box-sizing: border-box;
    -xv-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}