Stop writing SASS mixins for every CSS attribute that needs a vendor prefix by using this simple Prefix-Mixin

mixin-prefix.css

/**
* Mixin for adding vendor prefixes to CSS attributes; useful for the following CSS attributes
*
* - border-radius
* - box-shadow
* - transition
* - transform
* - background-size
* - box-sizing
* - animate
* - box-flex
*
* @param {string} $attribute - CSS attribute that needs vendor prefixes, e.g. border-radius or transition
* @param {string} $value - The specific CSS value, e.g. "translateX .2s ease-out"
*/
$prefixes: ("-webkit-","-moz-", "-o-", "-ms-", "");
@mixin prefix($attribute, $value) {
	@each $prefix in $prefixes {
        #{$prefix}#{$attribute}:unquote(#{$value});
    }
}

/*
* Usage
*
* .my-element { 
*     @include prefix(border-radius, 3px); 
*     @include prefix(box-shadow, 0 1px 5px rgba(0, 0, 0, .5)); 
*     @include prefix(transition, position .2s ease-out); 
* }
*/