compass 0.12.2.rc.0 → 0.12.2.rc.1

data/README.markdown

@@ -2,6 +2,8 @@
 
 Build Status: ![Build Status](https://secure.travis-ci.org/chriseppstein/compass.png)
 
+Code Quality: [![Code Climate](https://codeclimate.com/badge.png)](https://codeclimate.com/github/chriseppstein/compass)
+
 ## Resources
 
 * [Compass Homepage](http://compass-style.org/)

data/VERSION.yml

@@ -3,5 +3,5 @@
 :minor: 12
 :build: 2
 :state: rc
-:iteration: 0
+:iteration: 1
 :name: Alnilam

data/bin/compass

@@ -22,7 +22,8 @@ fallback_load_path(File.join(File.dirname(__FILE__), '..', 'lib')) do
 end
 
 if defined?(Bundler)
-  Bundler.require :assets
+  require 'bundler/shared_helpers'
+  Bundler.require :assets if Bundler::SharedHelpers.in_bundle?
 end
 
 runner = Proc.new do

data/frameworks/compass/stylesheets/compass/_css3.scss

@@ -14,4 +14,5 @@
 @import "css3/transform";
 @import "css3/transition";
 @import "css3/appearance";
-@import "css3/regions";
+@import "css3/regions";
+@import "css3/hyphenation";

data/frameworks/compass/stylesheets/compass/_support.scss

@@ -16,6 +16,10 @@ $legacy-support-for-ie8: $legacy-support-for-ie !default;
 // this combined variable.
 $legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
 
+// Whether to output legacy support for mozilla.
+// Usually this means hacks to support Firefox 3.6 or earlier.
+$legacy-support-for-mozilla: true;
+
 // Support for mozilla in experimental css3 properties (-moz).
 $experimental-support-for-mozilla      : true !default;
 // Support for webkit in experimental css3 properties (-webkit).

data/frameworks/compass/stylesheets/compass/css3/_columns.scss

@@ -69,3 +69,80 @@
     -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
+
+// Mixin for setting column-break-before
+//
+// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//
+//  Example: 
+//    h2.before {@include column-break-before(always);}
+//
+//  Which generates: 
+//
+//  h2.before {    
+//    -webkit-column-break-before: always;
+//    column-break-before: always;}
+@mixin column-break-before($value: auto){
+   @include experimental(column-break-before, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+}
+
+// Mixin for setting column-break-after
+//
+// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//
+//  Example: 
+//    h2.after {@include column-break-after(always); }
+//
+//  Which generates: 
+//
+//  h2.after {
+//    -webkit-column-break-after: always;
+//    column-break-after: always; }
+@mixin column-break-after($value: auto){
+   @include experimental(column-break-after, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+}
+
+// Mixin for setting column-break-inside
+//
+// * legal values are auto, avoid, avoid-page, avoid-column
+//
+//  Example: 
+//    h2.inside {@include column-break-inside();}
+//  Which generates: 
+//  
+//  h2.inside {
+//    -webkit-column-break-inside: auto;
+//    column-break-inside: auto;}
+@mixin column-break-inside($value: auto){
+   @include experimental(column-break-inside, $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+}
+
+// All-purpose mixin for setting column breaks.
+//
+// * legal values for $type : before, after, inside 
+// * legal values for '$value' are dependent on $type
+//    * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//    * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
+//    * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
+//  
+//  Examples: 
+//    h2.before {@include column-break(before, always);}
+//    h2.after {@include column-break(after, always); }
+//    h2.inside {@include column-break(inside); }
+//
+//  Which generates: 
+//  h2.before {    
+//    -webkit-column-break-before: always;
+//    column-break-before: always;}
+//  
+//  h2.after {
+//    -webkit-column-break-after: always;
+//    column-break-after: always; }
+//
+//  h2.inside {
+//    -webkit-column-break-inside: auto;
+//    column-break-inside: auto;}
+ 
+@mixin column-break($type: before, $value: auto){
+   @include experimental("column-break-#{$type}", $value, not -moz, -webkit, not -o, not -ms, not -khtml, official );
+}

data/frameworks/compass/stylesheets/compass/css3/_hyphenation.scss

@@ -0,0 +1,77 @@
+@import "shared";
+
+// Mixins to support specific CSS Text Level 3 elements
+//
+//
+//
+// Mixin for word-break properties
+// http://www.w3.org/css3-text/#word-break
+// * legal values for $type : normal, keep-all, break-all
+//
+// Example:
+//    p.wordBreak {@include word-break(break-all);}
+//
+// Which generates:
+//    p.wordBreak {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;}
+//
+@mixin word-break($value: normal){
+  @if $value == break-all {
+    //Most browsers handle the break-all case the same...
+    @include experimental(word-break, $value,
+      not -moz, not -webkit, not -o, -ms, not -khtml, official
+    );
+    //Webkit handles break-all differently... as break-word
+    @include experimental(word-break, break-word,
+      not -moz, not -webkit, not -o, not -ms, not -khtml, official
+    );
+  }
+  @else {
+    @include experimental(word-break, $value,
+      not -moz, not -webkit, not -o, -ms, not -khtml, official
+    );
+  }
+}
+
+// Mixin for the hyphens property
+//
+// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
+// * legal values for $type : auto, manual, none
+//
+// Example:
+//  p {
+//    @include hyphens(auto);}
+// Which generates:
+//  p {
+//    -moz-hyphens: auto;
+//    -webkit-hyphens: auto;
+//    hyphens: auto;}
+//
+@mixin hyphens($value: auto){
+  @include experimental(hyphens, $value,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}
+
+// Mixin for x-browser hyphenation based on @auchenberg's post:
+// Removes the need for the <wbr/> HTML tag
+// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
+//
+//  Example:
+//  div {@include hyphenation;}
+//
+//  Which generates:
+//    div {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;
+//      -moz-hyphens: auto;
+//      -webkit-hyphens: auto;
+//      hyphens: auto;}
+//
+@mixin hyphenation{
+  @include word-break(break-all);
+  @include hyphens;
+}

data/frameworks/compass/stylesheets/compass/css3/_images.scss

@@ -80,6 +80,8 @@
 // For use in IE 6 - 8. Best practice would have you apply this via a
 // conditional IE stylesheet, but if you must, you should place this before
 // any background-image properties that you have specified.
+//
+// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
 @mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
   @include has-layout;
   $gradient-type: if($orientation == vertical, 0, 1);

data/frameworks/compass/stylesheets/compass/css3/_inline-block.scss

@@ -1,16 +1,22 @@
 @import "shared";
 
-// Provides a cross-browser method to implement `display: inline-block;`
+// Set `$inline-block-alignment` to `none` or `false` to disable the output
+// of a vertical-align property in the inline-block mixin.
+// Or set it to a legal value for `vertical-align` to change the default.
+$inline-block-alignment: middle !default;
 
-@mixin inline-block {
-  @if $legacy-support-for-ie {
-    & { *display: inline; }
+// Provides a cross-browser method to implement `display: inline-block;`
+@mixin inline-block($alignment: $inline-block-alignment) {
+  @if $legacy-support-for-mozilla {
+    display: -moz-inline-stack;
   }
-  display: -moz-inline-box;
-  -moz-box-orient: vertical;
   display: inline-block;
-  vertical-align: middle;
+  @if $alignment and $alignment != none {
+    vertical-align: $alignment;
+  }
   @if $legacy-support-for-ie {
     *vertical-align: auto;
+    zoom: 1;
+    *display: inline;
   }
 }

data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss

@@ -7,10 +7,16 @@ $default-text-shadow-color:    #aaa !default;
 $default-text-shadow-h-offset: 0px  !default;
 $default-text-shadow-v-offset: 0px  !default;
 $default-text-shadow-blur:     1px  !default;
+$default-text-shadow-spread:   false  !default;
 
 // Provides cross-browser text shadows when one or more shadows are needed.
 // Each shadow argument should adhere to the standard css3 syntax for the
 // text-shadow property.
+//
+// Note: if any shadow has a spread parameter, this will cause the mixin
+// to emit the shadow declaration twice, first without the spread,
+// then with the spread included. This allows you to progressively
+// enhance the browsers that do support the spread parameter.
 @mixin text-shadow(
   $shadow-1 : default,
   $shadow-2 : false,
@@ -24,25 +30,58 @@ $default-text-shadow-blur:     1px  !default;
   $shadow-10: false
 ) {
   @if $shadow-1 == default {
-    $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
+    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
   }
-  text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
-                       $shadow-4, $shadow-5, $shadow-6,
-                       $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+  $shadows-without-spread: join((),(),comma);
+  $shadows: join((),(),comma);
+  $has-spread: false;
+  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
+                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
+    @if length($shadow) > 4 {
+      $has-spread: true;
+      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
+      $shadows: append($shadows, $shadow);
+    } else {
+      $shadows-without-spread: append($shadows-without-spread, $shadow);
+      $shadows: append($shadows, $shadow);
+    }
+  }
+  @if $has-spread {
+    text-shadow: $shadows-without-spread;
+  }
+  text-shadow: $shadows;
 }
 
 // Provides a single cross-browser CSS text shadow.
-// Includes default arguments for color, horizontal offset, vertical offset, and blur
+//
+// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
+// according to the configuration defaults above.
 @mixin single-text-shadow(
-  $color: $default-text-shadow-color,
-  $hoff: $default-text-shadow-h-offset,
-  $voff: $default-text-shadow-v-offset,
-  $blur: $default-text-shadow-blur
+  $hoff: false,
+  $voff: false,
+  $blur: false,
+  $spread: false,
+  $color: false
 ) {
-  // XXX I'm surprised we don't need experimental support for this property.
-  @if $color == none {
-    text-shadow: none;
+  // A lot of people think the color comes first. It doesn't.
+  @if type-of($hoff) == color {
+    $temp-color: $hoff;
+    $hoff: $voff;
+    $voff: $blur;
+    $blur: $spread;
+    $spread: $color;
+    $color: $temp-color;
+  }
+  // Can't rely on default assignment with multiple supported argument orders.
+  $hoff:   if($hoff,   $hoff,   $default-text-shadow-h-offset);
+  $voff:   if($voff,   $voff,   $default-text-shadow-v-offset);
+  $blur:   if($blur,   $blur,   $default-text-shadow-blur    );
+  $spread: if($spread, $spread, $default-text-shadow-spread  );
+  $color:  if($color,  $color,  $default-text-shadow-color   );
+  // We don't need experimental support for this property.
+  @if $color == none or $hoff == none {
+    @include text-shadow(none);
   } @else {
-    text-shadow: $color $hoff $voff $blur;
+    @include text-shadow(compact($hoff $voff $blur $spread $color));
   }
 }

data/frameworks/compass/stylesheets/compass/css3/_transform.scss

@@ -140,7 +140,7 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include transform( transforms [, 3D-only ] )
 //
-// where 'transforms' is a space separated list of all the transforms to be applied
+// where 'transforms' is a space separated list of all the transforms to be applied.
 @mixin transform(
   $transform,
   $only3d: false
@@ -174,8 +174,8 @@ $default-skew-y      : 5deg                  !default;
 //
 //      @include perspective( perspective )
 //
-// where 'perspective' is a uniless number representing the depth of the z-axis
-// the higher the perspective, the more exagerated the foreshortening.
+// where 'perspective' is a unitless number representing the depth of the
+// z-axis. The higher the perspective, the more exaggerated the foreshortening.
 // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
 @mixin perspective($p) {
   @include experimental(perspective, $p,
@@ -198,8 +198,8 @@ $default-skew-y      : 5deg                  !default;
 //
 //      @include transform-style( [ style ] )
 //
-// where `style` can be either `flat` or `preserve-3d`
-// browsers default to `flat`, mixin defaults to `preserve-3d`
+// where `style` can be either `flat` or `preserve-3d`.
+// Browsers default to `flat`, mixin defaults to `preserve-3d`.
 @mixin transform-style($style: preserve-3d) {
   @include experimental(transform-style, $style,
     -moz, -webkit, -o, -ms, not -khtml, official
@@ -210,8 +210,8 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include backface-visibility( [ visibility ] )
 //
-// where `visibility` can be either `visible` or `hidden`
-// browsers default to visible, mixin defaults to hidden
+// where `visibility` can be either `visible` or `hidden`.
+// Browsers default to visible, mixin defaults to hidden
 @mixin backface-visibility($visibility: hidden) {
   @include experimental(backface-visibility, $visibility,
     -moz, -webkit, -o, -ms, not -khtml, official
@@ -362,9 +362,9 @@ $default-skew-y      : 5deg                  !default;
 
 // Rotate an object around an arbitrary axis (3D)
 // @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
-// where the 'vector-' arguments accept unitless numbers
-// these numbers are not important on their own, but in relation to one another
-// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
+// where the 'vector-' arguments accept unitless numbers.
+// These numbers are not important on their own, but in relation to one another
+// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin rotate3d(
@@ -385,7 +385,7 @@ $default-skew-y      : 5deg                  !default;
 
 // Move an object along the x or y axis (2D)
 // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
-// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
+// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin translate(
@@ -463,7 +463,7 @@ $default-skew-y      : 5deg                  !default;
 //
 //     @include skew( [ skew-x, skew-y, 3D-only ] )
 //
-// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
+// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
 //
 // **Note** This mixin cannot be combined with other transform mixins.
 @mixin skew(
@@ -504,8 +504,8 @@ $default-skew-y      : 5deg                  !default;
 
 // Full transform mixins
 // For settings any combination of transforms as arguments
-// These are complex and not highly recommended for daily use
-// They are mainly here for backwards-compatability purposes
+// These are complex and not highly recommended for daily use. They are mainly
+// here for backward-compatibility purposes.
 //
 // * they include origin adjustments
 // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)

data/frameworks/compass/stylesheets/compass/css3/_transition.scss

@@ -30,9 +30,24 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
-@mixin transition-property($properties: $default-transition-property) {
-  @if type-of($properties) == string { $properties: unquote($properties); }
-  @include build-prefix-values(transition-property, $properties);
+@mixin transition-property($property-1: $default-transition-property,
+  $property-2 : false,
+  $property-3 : false,
+  $property-4 : false,
+  $property-5 : false,
+  $property-6 : false,
+  $property-7 : false,
+  $property-8 : false,
+  $property-9 : false,
+  $property-10: false
+) {
+  @if type-of($property-1) == string { $property-1: unquote($property-1); }
+  $properties: compact($property-1, $property-2, $property-3, $property-4, $property-5, $property-6, $property-7, $property-8, $property-9, $property-10);
+  @if $experimental-support-for-webkit    {       -webkit-transition-property : prefixed-for-transition(-webkit, $properties); }
+  @if $experimental-support-for-mozilla   {          -moz-transition-property : prefixed-for-transition(-moz,    $properties); }
+  @if $experimental-support-for-microsoft {           -ms-transition-property : prefixed-for-transition(-ms,     $properties); }
+  @if $experimental-support-for-opera     {            -o-transition-property : prefixed-for-transition(-o,      $properties); }
+                                                          transition-property : $properties;
 }
 
 // One or more durations in seconds
@@ -40,9 +55,20 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these durations will affect the properties in the same list position
 
-@mixin transition-duration($duration: $default-transition-duration) {
-  @if type-of($duration) == string { $duration: unquote($duration); }
-  @include experimental(transition-duration, $duration,
+@mixin transition-duration($duration-1: $default-transition-duration,
+  $duration-2 : false,
+  $duration-3 : false,
+  $duration-4 : false,
+  $duration-5 : false,
+  $duration-6 : false,
+  $duration-7 : false,
+  $duration-8 : false,
+  $duration-9 : false,
+  $duration-10: false
+) {
+  @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }
+  $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
+  @include experimental(transition-duration, $durations,
     -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
@@ -53,8 +79,20 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * For multiple, use a comma-delimited list
 // * These functions will effect the properties in the same list position
 
-@mixin transition-timing-function($function: $default-transition-function) {
-  @include experimental(transition-timing-function, unquote($function),
+@mixin transition-timing-function($function-1: $default-transition-function,
+  $function-2 : false,
+  $function-3 : false,
+  $function-4 : false,
+  $function-5 : false,
+  $function-6 : false,
+  $function-7 : false,
+  $function-8 : false,
+  $function-9 : false,
+  $function-10: false
+) {
+  $function-1: unquote($function-1);
+  $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
+  @include experimental(transition-timing-function, $functions,
     -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
@@ -64,9 +102,20 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * these delays will effect the properties in the same list position
 
-@mixin transition-delay($delay: $default-transition-delay) {
-  @if type-of($delay) == string { $delay: unquote($delay); }
-  @include experimental(transition-delay, $delay,
+@mixin transition-delay($delay-1: $default-transition-delay,
+  $delay-2 : false,
+  $delay-3 : false,
+  $delay-4 : false,
+  $delay-5 : false,
+  $delay-6 : false,
+  $delay-7 : false,
+  $delay-8 : false,
+  $delay-9 : false,
+  $delay-10: false
+) {
+  @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }
+  $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
+  @include experimental(transition-delay, $delays,
     -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
@@ -79,7 +128,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
+  @include transition(compact($property $duration $function $delay));
 }
 
 @mixin transition(
@@ -95,60 +144,82 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $transition-10: false
 ) {
   @if $transition-1 == default {
-    $transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
+    $transition-1 : compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay);
+  }
+  $transitions: false;
+  @if type-of($transition-1) == list and type-of(nth($transition-1,1)) == list {
+    $transitions: join($transition-1, compact($transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10), comma);
+  } @else {
+    $transitions : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
+  }
+  $delays: comma-list();
+  $has-delays: false;
+  $webkit-value: comma-list();
+  $moz-value: comma-list();
+  $ms-value: comma-list();
+  $o-value: comma-list();
+
+  // This block can be made considerably simpler at the point in time that
+  // we no longer need to deal with the differences in how delays are treated.
+  @each $transition in $transitions {
+    // Extract the values from the list
+    // (this would be cleaner if nth took a 3rd argument to provide a default value).
+    $property: nth($transition, 1);
+    $duration: false;
+    $timing-function: false;
+    $delay: false;
+    @if length($transition) > 1 { $duration:        nth($transition, 2); }
+    @if length($transition) > 2 { $timing-function: nth($transition, 3); }
+    @if length($transition) > 3 { $delay:           nth($transition, 4); $has-delays: true; }
+
+    // If a delay is provided without a timing function
+    @if is-time($timing-function) and not $delay { $delay: $timing-function; $timing-function: false; $has-delays: true; }
+
+    // Keep a list of delays in case one is specified
+    $delays: append($delays, if($delay, $delay, 0s));
+
+    $webkit-value: append($webkit-value, compact(prefixed-for-transition(-webkit, $property) $duration $timing-function));
+       $moz-value: append(   $moz-value, compact(prefixed-for-transition(   -moz, $property) $duration $timing-function $delay));
+        $ms-value: append(    $ms-value, compact(prefixed-for-transition(    -ms, $property) $duration $timing-function $delay));
+         $o-value: append(     $o-value, compact(prefixed-for-transition(     -o, $property) $duration $timing-function $delay));
   }
 
-  $transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
-  @include build-prefix-values(transition, $transition);
+  @if $experimental-support-for-webkit    {       -webkit-transition : $webkit-value;
+    // old webkit doesn't support the delay parameter in the shorthand so we progressively enhance it.
+    @if $has-delays                       { -webkit-transition-delay : $delays;       } }
+  @if $experimental-support-for-mozilla   {          -moz-transition : $moz-value;    }
+  @if $experimental-support-for-microsoft {           -ms-transition : $ms-value;     }
+  @if $experimental-support-for-opera     {            -o-transition : $o-value;      }
+                                                          transition : $transitions;
 }
 
-@mixin build-prefix-values($property, $values, $delay: false) {
-  $raw-values: ($values);
-  $index: compact(false);
-
-  $webkit-value: compact(false);
-  $moz-value: compact(false);
-  $ms-value: compact(false);
-  $o-value: compact(false);
-
-  @each $value in $raw-values {
-    $value: compact(join($value, false));
-    $match: false;
+// coerce a list to be comma delimited or make a new, empty comma delimited list.
+@function comma-list($list: ()) {
+  @return join((), $list, comma);
+}
 
-    @each $prefixed-value in $transitionable-prefixed-values {
-      @if index($value, $prefixed-value) {
-        $index: index($value, $prefixed-value);
-        $match: true;
-      }
+// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
+@function prefixed-for-transition($prefix, $property) {
+  @if type-of($property) == list {
+    $new-list: comma-list();
+    @each $v in $property {
+      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
     }
-
-    @if $match {
-      $value-prefix: nth($value, $index);
-      $value-suffix: compact(false);
-
-      @for $i from 2 through length($value) {
-        $value-suffix: append($value-suffix, nth($value, $i), space);
-      }
-
-      $non-webkit-suffix: compact(append($value-suffix, $delay, space));
-
-      $webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
-      $moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
-      $ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
-      $o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
+    @return $new-list;
+  } @else {
+    @if index($transitionable-prefixed-values, $property) {
+      @return #{$prefix}-#{$property};
     } @else {
-      $non-webkit-value: compact(append($value, $delay, space));
-
-      $webkit-value: append($webkit-value, $value, comma);
-      $moz-value: append($moz-value, $non-webkit-value, comma);
-      $ms-value: append($ms-value, $non-webkit-value, comma);
-      $o-value: append($o-value, $non-webkit-value, comma);
+      @return $property;
     }
   }
+}
 
-  @if $experimental-support-for-webkit    { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
-  @if $experimental-support-for-mozilla   {    -moz-#{$property} :    $moz-value; }
-  @if $experimental-support-for-microsoft {     -ms-#{$property} :     $ms-value; }
-  @if $experimental-support-for-opera     {      -o-#{$property} :      $o-value; }
-                                                    #{$property} :      compact($values $delay);
+// Checks if the value given is a unit of time.
+@function is-time($value) {
+  @if type-of($value) == number {
+    @return not not index(s ms, unit($value));
+  } @else {
+    @return false;
+  }
 }