Vendor Prefix Sass Mixin

Vendor prefixes is where browser vendors add prefixes to experimental or non-standard CSS properties.This tutorial will show you how-to create a vendor prefix Sass mixin, so you don’t need to remember to add them to certain CSS properties or type them out.

Here is the Sass mixin for vendor prefixes:

// Vendor prefixing for shorthand properties
@mixin vendor-prefixes($property, $value) {
        -webkit-#{$property}: $value;
        -moz-#{$property}: $value;
        -ms-#{$property}: $value;
        -o-#{$property}: $value;


@include vendor-prefixes(property, value);

Where property is the CSS property in which you want to add vendor prefixes for and value is the value for that CSS property.


@include vendor-prefixes(border-radius, 5px);


-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;

We can also include this Sass mixin within other Sass mixin. Let’s take the above example for instance, the border-radius CSS property.

@mixin border-radius($radius) {
  border-radius: $radius;
  @include vendor-prefixes(border-radius, $radius);

The above is a border-radius Sass mixin that incorporates the vendor prefix Sass mixin.

You would just use the border-radius Sass mixin in your code:

@include border-radius(5px);

Which would output:

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;