compass 0.12.7 → 0.13.alpha.0

data/frameworks/compass/stylesheets/compass/css3/_font-face.scss

@@ -16,7 +16,7 @@
 // [font generator](http://www.fontsquirrel.com/fontface/generator)
 //
 
-// In order to refer to a specific style of the font in your stylesheets as
+// In order to refer to a specific style of the font in your stylesheets as 
 // e.g. "font-style: italic;",  you may add a couple of @font-face includes
 // containing the respective font files for each style and specying
 // respective the $style parameter.
@@ -24,8 +24,8 @@
 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
 
 @mixin font-face(
-  $name,
-  $font-files,
+  $name, 
+  $font-files, 
   $eot: false,
   $weight: false,
   $style: false
@@ -35,7 +35,7 @@
     font-family: quote($name);
     @if $eot {
       src: font-url($eot);
-      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
+      $font-files: font-url($iefont) unquote("format('eot')"), $font-files; 
     }
     src: $font-files;
     @if $weight {

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

@@ -23,6 +23,7 @@
   @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
   @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
   @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
+  @if $experimental-support-for-microsoft    and prefixed(-ms,     $backgrounds) {      background:     -ms($backgrounds); }
   @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
                                                                                         background:         $backgrounds ;
 }
@@ -70,6 +71,7 @@
   @if $experimental-support-for-webkit       and prefixed(-webkit, $images) { background-image: -webkit($images); }
   @if $experimental-support-for-mozilla      and prefixed(-moz,    $images) { background-image:    -moz($images); }
   @if $experimental-support-for-opera        and prefixed(-o,      $images) { background-image:      -o($images); }
+  @if $experimental-support-for-microsoft    and prefixed(-ms,     $images) { background-image:     -ms($images); }
   @if $experimental-support-for-pie          and $add-pie-bg                { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
                                                                               background-image:         $images ;
 }
@@ -78,8 +80,6 @@
 // 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,22 +1,16 @@
 @import "shared";
 
-// 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;
-
 // 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;
+
+@mixin inline-block {
+  @if $legacy-support-for-ie {
+    & { *display: inline; }
   }
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
   display: inline-block;
-  @if $alignment and $alignment != none {
-    vertical-align: $alignment;
-  }
+  vertical-align: middle;
   @if $legacy-support-for-ie {
     *vertical-align: auto;
-    zoom: 1;
-    *display: inline;
   }
 }

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

@@ -36,3 +36,41 @@
   @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
   @if $official                                        { #{$property} :         #{$value}; }
 }
+
+// Change the experimental-support settings in specific contexts.
+@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
+  $experimental-support-for-mozilla: $moz;
+  $experimental-support-for-webkit: $webkit;
+  $experimental-support-for-microsoft: $ms;
+  $experimental-support-for-opera: $o;
+  $experimental-support-for-khtml: $khtml;
+}
+
+// Change the legacy-support-for-ie* settings in specific contexts.
+@mixin set-legacy-ie-support($ie6: false, $ie7: false, $ie8: false) {
+  $legacy-support-for-ie6: $ie6;
+  $legacy-support-for-ie7: $ie7;
+  $legacy-support-for-ie8: $ie8;
+}
+
+// This mixin allows you to change the experimental support settings for
+// child (@content) styles.
+@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false, $legacy-ie: false) {
+  // Capture the current state
+  $original-moz: $experimental-support-for-mozilla;
+  $original-webkit: $experimental-support-for-webkit;
+  $original-o: $experimental-support-for-opera;
+  $original-ms: $experimental-support-for-microsoft;
+  $original-khtml: $experimental-support-for-khtml;
+  $original-ie6: $legacy-support-for-ie6;
+  $original-ie7: $legacy-support-for-ie7;
+  $original-ie8: $legacy-support-for-ie8;
+  // Change support settings
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+  @include set-legacy-ie-support($legacy-ie, $legacy-ie, $legacy-ie);
+  // Apply styles
+  @content;
+  // Return to original support settings
+  @include set-legacy-ie-support($original-ie6, $original-ie7, $original-ie8);
+  @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
+}

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

@@ -7,16 +7,10 @@ $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,
@@ -30,58 +24,25 @@ $default-text-shadow-spread:   false  !default;
   $shadow-10: false
 ) {
   @if $shadow-1 == default {
-    $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);
+    $shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
   }
-  $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;
+  text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
+                       $shadow-4, $shadow-5, $shadow-6,
+                       $shadow-7, $shadow-8, $shadow-9, $shadow-10);
 }
 
 // Provides a single cross-browser CSS text shadow.
-//
-// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
-// according to the configuration defaults above.
+// Includes default arguments for color, horizontal offset, vertical offset, and blur
 @mixin single-text-shadow(
-  $hoff: false,
-  $voff: false,
-  $blur: false,
-  $spread: false,
-  $color: false
+  $color: $default-text-shadow-color,
+  $hoff: $default-text-shadow-h-offset,
+  $voff: $default-text-shadow-v-offset,
+  $blur: $default-text-shadow-blur
 ) {
-  // 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);
+  // XXX I'm surprised we don't need experimental support for this property.
+  @if $color == none {
+    text-shadow: none;
   } @else {
-    @include text-shadow(compact($hoff $voff $blur $spread $color));
+    text-shadow: $color $hoff $voff $blur;
   }
 }

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 unitless number representing the depth of the
-// z-axis. The higher the perspective, the more exaggerated the foreshortening.
+// where 'perspective' is a uniless number representing the depth of the z-axis
+// the higher the perspective, the more exagerated 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 backward-compatibility purposes.
+// These are complex and not highly recommended for daily use
+// They are mainly here for backwards-compatability 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,23 +30,9 @@ $transitionable-prefixed-values: transform, transform-origin !default;
 // * for multiple, use a comma-delimited list
 // * also accepts "all" or "none"
 
-@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-opera     {            -o-transition-property : prefixed-for-transition(-o,      $properties); }
-                                                          transition-property : $properties;
+@mixin transition-property($properties: $default-transition-property) {
+  @if type-of($properties) == string { $properties: unquote($properties); }
+  @include build-prefix-values(transition-property, $properties);
 }
 
 // One or more durations in seconds
@@ -54,21 +40,10 @@ $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-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, not -ms, not -khtml, official
+@mixin transition-duration($duration: $default-transition-duration) {
+  @if type-of($duration) == string { $duration: unquote($duration); }
+  @include experimental(transition-duration, $duration,
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -78,21 +53,9 @@ $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-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, not -ms, not -khtml, official
+@mixin transition-timing-function($function: $default-transition-function) {
+  @include experimental(transition-timing-function, unquote($function),
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -101,21 +64,10 @@ $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-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, not -ms, not -khtml, official
+@mixin transition-delay($delay: $default-transition-delay) {
+  @if type-of($delay) == string { $delay: unquote($delay); }
+  @include experimental(transition-delay, $delay,
+    -moz, -webkit, -o, -ms, not -khtml, official
   );
 }
 
@@ -127,7 +79,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @include transition(compact($property $duration $function $delay));
+  @include build-prefix-values(transition, compact($property $duration $function, false), $delay);
 }
 
 @mixin transition(
@@ -145,77 +97,58 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @if $transition-1 == default {
     $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();
-  $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));
-         $o-value: append(     $o-value, compact(prefixed-for-transition(     -o, $property) $duration $timing-function $delay));
-  }
 
-  @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-opera     {            -o-transition : $o-value;      }
-                                                          transition : $transitions;
+  $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);
 }
 
-// coerce a list to be comma delimited or make a new, empty comma delimited list.
-@function comma-list($list: ()) {
-  @return join((), $list, comma);
-}
+@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);
 
-// 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));
+  @each $value in $raw-values {
+    $value: compact(join($value, false));
+    $match: false;
+
+    @each $prefixed-value in $transitionable-prefixed-values {
+      @if index($value, $prefixed-value) {
+        $index: index($value, $prefixed-value);
+        $match: true;
+      }
     }
-    @return $new-list;
-  } @else {
-    @if index($transitionable-prefixed-values, $property) {
-      @return #{$prefix}-#{$property};
+
+    @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);
     } @else {
-      @return $property;
+      $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);
     }
   }
-}
 
-// 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;
-  }
+  @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);
 }