css3: use transition shorthand if appropriate (closes #585)

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

@@ -73,16 +73,43 @@ $default-transition-delay: false !default;
 // Transition all-in-one shorthand
 
 @mixin single-transition(
-  $properties: $default-transition-property,
+  $property: $default-transition-property,
   $duration: $default-transition-duration,
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
-  @include transition-property($properties);
+  @if $property and $duration and $function {
+    // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
+    @if $delay {
+      -webkit-transition: $property $duration $function;
+      -webkit-transition-delay: $delay;
+      @include experimental(transition, $property $duration $function $delay,
+        -moz,
+        not -webkit,
+        -o,
+        not -ms,
+        not -khtml,
+        official
+      );
+    }
+    @else {
+      @include experimental(transition, $property $duration $function,
+        -moz,
+        -webkit,
+        -o,
+        not -ms,
+        not -khtml,
+        official
+      );
+    }
+  }
+  @else {
+    @include transition-property($property);
     @include transition-duration($duration);
     @if $function { @include transition-timing-function($function); }
     @if $delay { @include transition-delay($delay); }
   }
+}
 
 @mixin transition(
   $transition-1 : default,

test/fixtures/stylesheets/compass/css/transition.css

@@ -0,0 +1,12 @@
+.single-transition-without-delay {
+  -moz-transition: all 0.6s ease-out;
+  -webkit-transition: all 0.6s ease-out;
+  -o-transition: all 0.6s ease-out;
+  transition: all 0.6s ease-out; }
+
+.single-transition-with-delay {
+  -webkit-transition: all 0.6s ease-out;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: all 0.6s ease-out 0.2s;
+  -o-transition: all 0.6s ease-out 0.2s;
+  transition: all 0.6s ease-out 0.2s; }

test/fixtures/stylesheets/compass/sass/transition.scss

@@ -0,0 +1,4 @@
+@import "compass/css3/transition";
+
+.single-transition-without-delay  { @include single-transition(all, 0.6s, ease-out); }
+.single-transition-with-delay     { @include single-transition(all, 0.6s, ease-out, 0.2s); }