Prefix mixins cleanup

assets/timber.scss.liquid

@@ -126,7 +126,7 @@ $drawerCartWidth: 300px;
 $colorDrawers: #f6f6f6;
 $colorDrawerBorder: darken($colorDrawers, 5%);
 $colorDrawerText: #333;
-$drawerTransition: 'all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1)';
+$drawerTransition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);
 
 // Sizing variables
 $siteWidth: 1180px;
@@ -178,40 +178,52 @@ $socialIconFontStack: 'icons';
   *zoom: 1;
 }
 
-@mixin prefix($property, $value) {
-  -webkit-#{$property}: #{$value};
-  -moz-#{$property}: #{$value};
-  -ms-#{$property}: #{$value};
-  -o-#{$property}: #{$value};
-  #{$property}: #{$value};
-}
+/*============================================================================
+  Prefixer mixin for generating vendor prefixes:
+    - Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
+    - Usage:
+
+      // Input:
+      .element {
+        @include prefixer(transform, scale(1), ms webkit spec);
+      }
 
-@mixin transition($transition: 0.1s all) {
-  @include prefix('transition', #{$transition});
+      // Output:
+      .element {
+        -ms-transform: scale(1);
+        -webkit-transform: scale(1);
+        transform: scale(1);
+      }
+==============================================================================*/
+
+@mixin prefixer($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      -webkit-#{$property}: $value;
+    } @else if $prefix == moz {
+      -moz-#{$property}: $value;
+    } @else if $prefix == ms {
+      -ms-#{$property}: $value;
+    } @else if $prefix == o {
+      -o-#{$property}: $value;
+    } @else if $prefix == spec {
+      #{$property}: $value;
+    } @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
 }
 
 @mixin transform($transform: 0.1s all) {
-  @include prefix('transform', #{$transform});
+  @include prefixer(transform, $transform, ms webkit spec);
 }
 
-@mixin gradient($from, $to, $fallback) {
-  background: $fallback;
-  background: -moz-linear-gradient(top, $from 0%, $to 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
-  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
-  background: -o-linear-gradient(top, $from 0%, $to 100%);
-  background: -ms-linear-gradient(top, $from 0%, $to 100%);
-  background: linear-gradient(top bottom, $from 0%, $to 100%);
+@mixin user-select($value) {
+  @include prefixer(user-select, $value, webkit moz ms spec);
 }
 
 @mixin backface($visibility: hidden) {
-  @include prefix('backface-visibility', #{$visibility});
-}
-
-@mixin box-sizing($box-sizing: border-box) {
-  -webkit-box-sizing: #{$box-sizing};
-  -moz-box-sizing: #{$box-sizing};
-  box-sizing: #{$box-sizing};
+  @include prefixer(backface-visiblity, $visibility, webkit spec);
 }
 
 @function em($target, $context: $baseFontSize) {
@@ -261,7 +273,7 @@ $max: max-width;
   #Normalize
 ==============================================================================*/
 *, input, :before, :after {
-  @include box-sizing();
+  box-sizing: border-box;
 }
 
 html, body {
@@ -364,14 +376,14 @@ $class-type: unquote(".");
 }
 
 #{$class-type}grid__item {
+  box-sizing: border-box;
   float: left;
   min-height: 1px;
   padding-left: $gridGutter;
   vertical-align: top;
   @if $mobile-first == true {
     width: 100%;
   }
-  @include box-sizing();
 }
 
 /*============================================================================
@@ -1061,7 +1073,7 @@ html input[disabled] {
   white-space: nowrap;
   cursor: pointer;
   border: 1px solid transparent;
-  @include prefix('user-select', 'none');
+  @include user-select(none);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: $radius;
@@ -1278,7 +1290,7 @@ button,
 select {
   padding: 0;
   margin: 0;
-  @include prefix('user-select', 'text');
+  @include user-select(text);
 }
 
 button {
@@ -1597,7 +1609,7 @@ label.error {
 .icon-youtube:before { content: "\79"; }
 
 .payment-icons {
-  @include prefix('user-select', 'none');
+  @include user-select(none);
   cursor: default;
 
   li {
@@ -1934,13 +1946,13 @@ label.error {
   max-height: 0;
   visibility: hidden;
   overflow: hidden;
-  @include backface(hidden);
-  @include transition(all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
+  transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
+  @include backface();
 
   .mobile-nav--expanded + & {
     visibility: visible;
     max-height: 700px;
-    @include transition(all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
+    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
   }
 
   .mobile-nav__item:after {
@@ -1974,7 +1986,7 @@ label.error {
   z-index: $zindexDrawer;
   color: $colorDrawerText;
   background-color: $colorDrawers;
-  @include transition($drawerTransition);
+  transition: $drawerTransition;
 
   a {
     color: $colorDrawerText;
@@ -2026,7 +2038,7 @@ label.error {
 }
 
 .is-moved-by-drawer {
-  @include transition($drawerTransition);
+  transition: $drawerTransition;
 
   .js-drawer-open-left & {
     @include transform(translateX($drawerNavWidth));
@@ -2315,8 +2327,8 @@ label.error {
     max-height: 0;
     overflow: hidden;
     visibility: hidden;
-    @include backface(hidden);
-    @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
+    transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
+    @include backface();
   }
 }
 
@@ -2376,7 +2388,7 @@ label.error {
   background: none;
   text-align: center;
   overflow: hidden;
-  @include prefix('user-select', 'none');
+  @include user-select(none);
 
   &:hover,
   &:focus {
@@ -2401,7 +2413,7 @@ label.error {
 
   .is-loading & {
     opacity: 0.5;
-    @include transition(none);
+    transition: none;
   }
 }