SASS: `transition` mixin with vendor-prefixed properties

transition.scss

// Transition
// Vendor-prefixed `transition` with individual properties also vendor-prefixed
 
// Takes a comma-separated list of properties to be transitioned.
// Each property looks like this: [property] [time] [timing-function]
// Property name must come first. The `time` and `timing-function` values are optional.
 
@mixin transition($properties...) {
  $prefixes: webkit moz standard;
 
  $prefix: (
    webkit: '-webkit-',
    moz:  '-moz-',
    standard: ''
  );
 
  $props: (
    webkit: (),
    moz: (),
    standard: ()
  );
 
  $prefixed: (
    border-bottom-left-radius
    border-bottom-right-radius
    border-radius
    border-top-left-radius
    border-top-right-radius
    box-shadow
    box-sizing
    linear-gradient
    transform
  );
 
  @each $p in $properties {
    @each $pf in $prefixes {
      $property: nth($p, 1);
      // add vendor prefix if needed for current property
      @if index($prefixed, $property) {
        $property: #{map-get($prefix, $pf)}$property;
      }
      // append the remaining values (time, timing function)
      @if length($p) > 1 {
        @for $i from 2 through length($p) {
          $property: $property #{nth($p, $i)}
        }
      }
      // add the property to the $props array for the current prefix
      $props: map-merge($props, ($pf: append(map-get($props, $pf), $property)));
    }
  }
 
  @each $k, $v in $props {
    transition: join((), $v, comma);
  }
}
 
 
// Example:
div {
  @include transition(border-radius 0.2s, box-shadow 0.1s linear, border 1s);
}