SASS Mixins for nice transitions

_transitions.sass

// These default values could be overwritten in a potentially cleaned up global config file ;-)
$transition--easing: cubic-bezier(0.4, 0, 0.2, 1) !default
$transition--slow: '0.2s 0.1s' !default
$transition--fast: '0.1s' !default

// The main mixin
=transition($speed, $properties...)
  $transitions: ()

  // Timing is fast, unless 'slow' is specified
  $timing: $transition--fast
  @if $speed == slow
    $timing: $transition--slow

  @each $property in $properties
    $transitions: append($transitions, #{$property} #{$timing} #{$transition--easing}, comma)

  transition: $transitions

// Convenience Functions
// ---------------------
// Use fast transition for small elements and
// in-place transition
//
// Use slow transition for large elements and
// transitions affecting multiple sections of
// the view
=fast-transition($properties...)
  +transition(fast, $properties)

=slow-transition($properties...)
  +transition(slow, $properties)

// Example Usage
.element
  +fast-transition(opacity, padding)
  +slow-transition(margin)