prefixer added

scss/mixins/_animation.scss

@@ -92,11 +92,7 @@ $animation-play-state-modes: concat((paused, running), $css-default-modes);
 // @include animation(10s, 5s, changecolour)
 @mixin animation($options) {
   @if is-css-default($options) {
-    -webkit-animation: $options;
-    -moz-animation: $options;
-    -ms-animation: $options;
-    -o-animation: $options;
-    animation: $options;
+    @include prefixer(animation, $options);
   }
   @else {
     $settings: (name: none, duration: 0s, delay: 0s, direction: normal, iteration-count: 0, timing-function: ease, fill-mode: forwards, play-state: initial);
@@ -159,11 +155,7 @@ $animation-play-state-modes: concat((paused, running), $css-default-modes);
     $animation-name: map-get($settings, name);
 
     @if is-animation-name($animation-name) {
-      -webkit-animation-name: $animation-name;
-      -moz-animation-name: $animation-name;
-      -ms-animation-name: $animation-name;
-      -o-animation-name: $animation-name;
-      animation-name: $animation-name;
+      @include prefixer(animation-name, $animation-name);
     }
     @else {
       @error '`animation-name: #{$animation-name}` is mandatory parameter';
@@ -172,11 +164,7 @@ $animation-play-state-modes: concat((paused, running), $css-default-modes);
     $animation-duration: map-get($settings, duration);
 
     @if is-animation-time($animation-duration) {
-      -webkit-animation-duration: $animation-duration;
-      -moz-animation-duration: $animation-duration;
-      -ms-animation-duration: $animation-duration;
-      -o-animation-duration: $animation-duration;
-      animation-duration: $animation-duration;
+      @include prefixer(animation-duration, $animation-duration);
     }
     @else {
       @warn '`animation-duration: #{$animation-duration}` is not a valid animation time value (only time & css defaults are allowed)';
@@ -185,11 +173,7 @@ $animation-play-state-modes: concat((paused, running), $css-default-modes);
     $animation-delay: map-get($settings, delay);
 
     @if is-animation-time($animation-delay) {
-      -webkit-animation-delay: $animation-delay;
-      -moz-animation-delay: $animation-delay;
-      -ms-animation-delay: $animation-delay;
-      -o-animation-delay: $animation-delay;
-      animation-delay: $animation-delay;
+      @include prefixer(animation-delay, $animation-delay);
     }
     @else {
       @warn '`animation-delay: #{$animation-delay}` is not a valid animation time value (only time & css defaults are allowed)';
@@ -198,11 +182,7 @@ $animation-play-state-modes: concat((paused, running), $css-default-modes);
     $animation-direction: map-get($settings, direction);
 
     @if is-animation-direction($animation-direction) {
-      -webkit-animation-direction: $animation-direction;
-      -moz-animation-direction: $animation-direction;
-      -ms-animation-direction: $animation-direction;
-      -o-animation-direction: $animation-direction;
-      animation-direction: $animation-direction;
+      @include prefixer(animation-direction, $animation-direction);
     }
     @else {
       @warn '`animation-direction: #{$animation-direction}` is not a valid animation direction value';
@@ -211,63 +191,34 @@ $animation-play-state-modes: concat((paused, running), $css-default-modes);
     $animation-iteration-count: map-get($settings, iteration-count);
 
     @if is-animation-iteration-count($animation-iteration-count) {
-      -webkit-animation-iteration-count: $animation-iteration-count;
-      -moz-animation-iteration-count: $animation-iteration-count;
-      -ms-animation-iteration-count: $animation-iteration-count;
-      -o-animation-iteration-count: $animation-iteration-count;
-      animation-iteration-count: $animation-iteration-count;
+      @include prefixer(animation-iteration-count, $animation-iteration-count);
     }
     @else {
       @warn '`animation-iteration-count: #{$animation-iteration-count}` is not a valid animation iteration count value';
     }
 
-    $animation-direction: map-get($settings, direction);
+    $animation-timing-function: map-get($settings, timing-function);
 
-    @if is-animation-direction($animation-direction) {
-      -webkit-animation-direction: $animation-direction;
-      -moz-animation-direction: $animation-direction;
-      -ms-animation-direction: $animation-direction;
-      -o-animation-direction: $animation-direction;
-      animation-direction: $animation-direction;
+    @if is-animation-timing-function($animation-timing-function) {
+      @include prefixer(animation-timing-function, $animation-timing-function);
     }
     @else {
-      @warn '`animation-direction: #{$animation-direction}` is not a valid animation direction value';
+      @warn '`animation-timing-function: #{$animation-timing-function}` is not a valid animation timing function value';
     }
 
     $animation-fill-mode: map-get($settings, fill-mode);
 
     @if is-animation-fill-mode($animation-fill-mode) {
-      -webkit-animation-fill-mode: $animation-fill-mode;
-      -moz-animation-fill-mode: $animation-fill-mode;
-      -ms-animation-fill-mode: $animation-fill-mode;
-      -o-animation-fill-mode: $animation-fill-mode;
-      animation-fill-mode: $animation-fill-mode;
+      @include prefixer(animation-fill-mode, $animation-fill-mode);
     }
     @else {
       @warn '`animation-fill-mode: #{$animation-fill-mode}` is not a valid animation fill mode value';
     }
 
-    $animation-timing-function: map-get($settings, timing-function);
-
-    @if is-animation-timing-function($animation-timing-function) {
-      -webkit-animation-timing-function: $animation-timing-function;
-      -moz-animation-timing-function: $animation-timing-function;
-      -ms-animation-timing-function: $animation-timing-function;
-      -o-animation-timing-function: $animation-timing-function;
-      animation-timing-function: $animation-timing-function;
-    }
-    @else {
-      @warn '`animation-timing-function: #{$animation-timing-function}` is not a valid animation timing function value';
-    }
-
     $animation-play-state: map-get($settings, play-state);
 
     @if is-animation-direction($animation-play-state) {
-      -webkit-animation-play-state: $animation-play-state;
-      -moz-animation-play-state: $animation-play-state;
-      -ms-animation-play-state: $animation-play-state;
-      -o-animation-play-state: $animation-play-state;
-      animation-play-state: $animation-play-state;
+      @include prefixer(animation-play-state, $animation-play-state);
     }
     @else {
       @warn '`animation-play-state: #{$animation-play-state}` is not a valid animation play state value';

scss/mixins/_appearance.scss

@@ -1,7 +1,5 @@
-@mixin appearance ($value) {
-  -webkit-appearance: $value;
-  -moz-appearance: $value;
-  appearance: $value;
+@mixin appearance ($a) {
+  @include prefixer(appearance, $a);
 }
 
 @mixin outline($outline) {
@@ -14,11 +12,8 @@
 }
 
 @mixin overflow-hidden-animated {
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-
-  -moz-transform: translate3d(0, 0, 0);
-  -webkit-transform: translate3d(0, 0, 0);
+  @include prefixer(backface-visibility, hidden);
+  @include transform(translate3d(0, 0, 0), webkit moz);
 
   overflow: hidden;
 }

scss/mixins/_border.scss

@@ -4,12 +4,8 @@ $border-styles: concat((none, hidden, dotted, dashed, solid, double, groove, rid
   @return contains($border-styles, $bs);
 }
 
-@mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -o-border-radius: $radius;
-  border-radius: $radius;
+@mixin border-radius($br...) {
+  @include prefixed(border-radius, $br);
 }
 
 $border-modes: concat((none), $css-default-modes);

scss/mixins/_box.scss

@@ -195,9 +195,7 @@ $bound-box-sizes: concat((none), $css-default-modes);
 }
 
 @mixin box-shadow($shadows...) {
-  -webkit-box-shadow: $shadows;
-  -moz-box-shadow: $shadows;
-  box-shadow: $shadows;
+  @include prefixer(box-shadow, $shadows);
 }
 
 @mixin aspect-ratio($width, $height, $content-selector: '.content') {

scss/mixins/_transform.scss

@@ -1,10 +1,6 @@
 // generic transform
 @mixin transform($transforms) {
-  -webkit-transform: $transforms;
-  -moz-transform: $transforms;
-  -ms-transform: $transforms;
-  -o-transform: $transforms;
-  transform: $transforms;
+  @include prefixer(transform, $transforms);
 }
 
 // rotate
@@ -28,10 +24,21 @@
 }
 
 //transform origin
-@mixin transform-origin($origin) {
-  -webkit-transform-origin: $origin;
-  -moz-transform-origin: $origin;
-  -ms-transform-origin: $origin;
-  -o-transform-origin: $origin;
-  transform-origin: $origin;
+@mixin transform-origin($to) {
+  @include prefixer(transform-origin, $to);
+}
+
+$transform-style-modes: concat((flat, preserve-3d), $css-default-modes);
+
+@function is-transform-style-mode($ts) {
+  @return contains($transform-style-modes, $ts);
+}
+
+@mixin transform-style($ts) {
+  @if is-defined($ts) and is-transform-style-mode($ts) {
+    @include prefixer(transform-style, $ts);
+  }
+  @else {
+    @warn '`transform-style: #{$ts}` is not a valid transform-style mode';
+  }
 }

scss/mixins/_transition.scss

@@ -1,36 +1,20 @@
-// TODO: refactorization
-
-@mixin transition($transition...) {
-  -moz-transition: $transition;
-  -o-transition: $transition;
-  -webkit-transition: $transition;
-  transition: $transition;
+// TODO: refactorize
+@mixin transition($transitions...) {
+  @include prefixer(transition, $transitions);
 }
 
-@mixin transition-property($property...) {
-  -moz-transition-property: $property;
-  -o-transition-property: $property;
-  -webkit-transition-property: $property;
-  transition-property: $property;
+@mixin transition-property($tp...) {
+  @include prefixer(transition-protperty, $tp);
 }
 
-@mixin transition-duration($duration...) {
-  -moz-transition-property: $duration;
-  -o-transition-property: $duration;
-  -webkit-transition-property: $duration;
-  transition-property: $duration;
+@mixin transition-duration($td...) {
+  @include prefixer(transition-duration, $td);
 }
 
-@mixin transition-timing-function($timing...) {
-  -moz-transition-timing-function: $timing;
-  -o-transition-timing-function: $timing;
-  -webkit-transition-timing-function: $timing;
-  transition-timing-function: $timing;
+@mixin transition-timing-function($tf...) {
+  @include prefixer(transition-timing-function, $tf);
 }
 
-@mixin transition-delay($delay...) {
-  -moz-transition-delay: $delay;
-  -o-transition-delay: $delay;
-  -webkit-transition-delay: $delay;
-  transition-delay: $delay;
+@mixin transition-delay($td...) {
+  @include prefixer(transition-delay, $td);
 }

scss/mixins/_utils.scss

@@ -0,0 +1,52 @@
+@charset "UTF-8";
+
+/// A mixin for generating vendor prefixes on non-standardized properties.
+///
+/// @param {String} $property
+///   Property to prefix
+///
+/// @param {*} $value
+///   Value to use
+///
+/// @param {List} $prefixes
+///   Prefixes to define
+///
+/// @example scss - Usage
+///   .element {
+///     @include prefixer(border-radius, 10px, webkit ms spec);
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     -webkit-border-radius: 10px;
+///     -moz-border-radius: 10px;
+///     border-radius: 10px;
+///   }
+///
+/// @require {variable} $prefix-for-webkit
+/// @require {variable} $prefix-for-mozilla
+/// @require {variable} $prefix-for-microsoft
+/// @require {variable} $prefix-for-opera
+/// @require {variable} $prefix-for-spec
+@mixin prefixer($property, $values..., $prefixes: webkit moz ms o spec) {
+  @each $prefix in $prefixes {
+    @if $prefix==webkit {
+      -webkit-#{$property}: $values;
+    }
+    @else if $prefix==moz {
+      -moz-#{$property}: $values;
+    }
+    @else if $prefix==ms {
+      -ms-#{$property}: $values;
+    }
+    @else if $prefix==o {
+      -o-#{$property}: $values;
+    }
+    @else if $prefix==spec {
+      #{$property}: $values;
+    }
+    @else {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}

scss/mixins/mixins.scss

@@ -1,3 +1,4 @@
+@import 'utils';
 @import 'box';
 @import 'background';
 @import 'text';