41

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.

9 Answers 9

78

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/

4
  • 1
    Interesting Rimian and quite handy solution. I just don't see using Sass without Compass though. Thanks for the info, gave you an upvote. Commented Jul 1, 2013 at 14:15
  • No probs! I am building a mobile site within a framework that already exists. I think I might see if I can make compass available. :)
    – Rimian
    Commented Jul 2, 2013 at 2:25
  • 2
    this is probably the most useful answer because it generalizes to other properties.
    – Justin L.
    Commented Aug 9, 2013 at 5:48
  • It's stupid to do it with a mixin. Why should you remember to use it if you always want it for certain properties? It should happen on compilation time automatically.
    – Robo Robok
    Commented Dec 22, 2021 at 10:06
26

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);
}
5
  • hopper, when I add this to my .scss file @import "compass/css3/box-sizing";, a compiling error is injected in the .css file. What's going on? Where is the file "box-sizing? Thanks. Commented Oct 9, 2012 at 14:00
  • 1
    The box-sizing file is located in the internals of the Compass gem. How are you performing the compilation? If you're compiling using the SASS command line, you need to specify the --compass option to ensure the Compass files are on the load path, e.g. sass --compass file.scss file.css.
    – hopper
    Commented Oct 9, 2012 at 16:00
  • What I do in the CMD line is this: (already in my project folder) sass --watch scss:css --style compact. I'm watching folders, not files. Do I need to add --compass file.scss file.css? If so, do I have to use the files or can I have it 'watch' folders instead? Tnx. Commented Oct 9, 2012 at 18:51
  • 2
    Watching folders should work fine - all you need to do is add the --compass flag to your command: sass --watch scss:css --style compact --compass.
    – hopper
    Commented Oct 9, 2012 at 22:05
  • Aha! Well, that's the part they don't mention in any tutorial I've read: If you want to use Compass' already built mixins you need to include the compass flag "--compass" to your CMD line. It works great hopper. Thanks! Commented Oct 11, 2012 at 4:01
5

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

1
  • 1
    Todo bien. Nice mixins man. One thing to consider is that now Opera is powered by Blink so we need to be mindful that when and if we use the -o- prefix is because we're considering support for legacy versions of Opera. And if you ask me, I'll be dropping the -o- prefix in my CSS in the next couple of months. So mixins like this one should be mindful of that as well so we're not injecting unnecessary prefixes in our CSS. Gave you an upvote amigo. Commented Nov 12, 2013 at 4:22
4

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);
2
  • This is very interesting, Thanks. Certainly a lot easier to use than others custom mixins I've seen. Quick question: What is the +? Why not use @include? Commented Dec 6, 2013 at 3:30
  • You can use both with .sass syntax, but I find the "+" more readable—especially when using short mixin names.
    – Henrik
    Commented Dec 6, 2013 at 10:07
2

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.

2
  • This is a rather incomplete answer. You should include links to outside libraries you're recommending and a basic points of the solution in the response itself. (ie, the needed grunt configuration, etc.) Commented Feb 19, 2014 at 17:31
  • 2
    Being much experienced now, I do use Autoprefixer, but I use it via the Sass compiler apps I use rather than a task runner. I'm currently using Koala App which is capable of applying Autoprefixer while generating source maps. I also used Prepros but it wasn't capable of using Autoprefixer if you selected source maps. Granted I haven't yet tried the latest version, v.5.1 (at the moment of writing this). Commented Nov 3, 2014 at 15:18
2
$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;
}
4
  • Nice! However, I now use Autoprefixer :). Thanks though, gave you an upvote. Commented Jun 6, 2016 at 4:16
  • Thx, yeh true, nowadays apps have their own auto prefixers, I've been using Koala but I sometimes add special vendor prefixes which Koala doesn't do. Commented Jun 6, 2016 at 19:10
  • thanks it runs. But I think you forget write ":" after $vendors Commented May 22, 2017 at 8:09
  • You deserve 1,000,000 up-votes! Thanks! Appreciate it.
    – user5870134
    Commented Jul 2, 2017 at 11:40
1

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. *

2
  • 1
    Great mixin, albeit quite complex. I have to admit that although this approach is technically impressive it still leaves the developer in a situation to know which properties/values should and shouldn't be prefixed. We all know that's futile :p Autoprefixer is THE only way to go be it with Koala, or Prepros (which I use), a build system, a plugin for your IDE or compiler. Thanks for sharing. Commented Sep 5, 2016 at 17:38
  • Thanks @RicardoZea For recognizing this, I know i gave it all. Could have started with simple and add more advanced usecases, but then i would have ended up writing an article on stack overflow :D thanks again. :) Commented Apr 6, 2017 at 7:15
0

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));
1
  • And what's the render? Commented May 3, 2020 at 14:31
0

Here an example that given in official SASS Website - Link

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

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}
.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}
1
  • Thanks for sharing Filly. This is certainly an option, the only issue I see is that the vendor prefixes are hardcoded into the mixin, which means that the author has to know and remember all the vendor prefixes out there. I prefer to automate that work instead and that's where Autoprefixer shines. Thanks again for sharing! Commented Aug 2, 2020 at 16:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.