CSS Transition helper for sass with compass

28 May 2014

This is a component from an old project from mine, it’s a switcher, very small but have lots of transition.Transition is easy, but there are some details like:

Different durations

a
  +transition( background .5s, color .5s, text-indent 1s, letter-spacing 1s )

Different delay

a
  +transition( background .5s, color .3s .5s, font-size .5s .8s )

And, sometimes you may like it all delay .5s only when mouseout

a
  +transition( color .5s .5s, background 1s .5s )
  &:hover
    +transition( color .5s, background 1s )

Thanks to compass, it can be simpler

$delay: .5s
a
  +transition( color .5s, background 1s )
  +transition-delay( $delay )
  &:hover
    +transition( color .5s, background 1s )

See the Pen ymDls by naiting (@sliiice) on CodePen.