Sass Mixins for cross-browser CSS3

sass-css3-mixins.sass

/*
 * Author: Aniket A. Suryavanshi | @44Sur
 * Gist URL: https://gist.github.com/anikets/2da2fb7ac318c2f507a7
 *
 * Some mixins for quickly writing less bloated cross-browser CSS.
 *
 * Setup instructions:
 *   Save this file with a .scss extension. Import this file in the .scss file
 *   in which you wish to use these mixins by adding this directive at the top:
 *     @import 'css3-scss-mixins';
 *
 * Example usage:
 *   @include rotate( 30deg );
 *   @include perspective( 600px );
 *   @include transform( scale( 1.5, 1.5 ));
 *   @include transform( translateX( 50px ));
 *   @include transition( all 0.3s ease );
 *   @include transition( width 1s linear );
 *   @include bgimg
 *   @include bgimg( 'images/foo.jpg' )
 *   @include bgimg( 'images/foo.jpg', contain, 'top left', 'repeat' )*/

@mixin rotate( $degree )
  -webkit-transform: rotate( $degree )
  -moz-transform: rotate( $degree )
  -ms-transform: rotate( $degree )
  -o-transform: rotate( $degree )
  transform: rotate( $degree )

@mixin perspective( $viewerDistance )
  -webkit-perspective: $viewerDistance
  perspective: $viewerDistance

@mixin transform( $transformParams )
  -webkit-transform: $transformParams
  -moz-transform: $transformParams
  -ms-transform: $transformParams
  -o-transform: $transformParams
  transform: $transformParams

@mixin transformOrigin( $transformOrigin )
  -webkit-transform-origin: $transformOrigin
  transform-origin: $transformOrigin

@mixin transition( $params... )
  -webkit-transition: $params
  -moz-transition: $params
  -o-transition: $params
  transition: $params

@mixin box-sizing( $param )
  -webkit-box-sizing: $param
  -moz-box-sizing: $param
  box-sizing: $param

@mixin border-radius( $radius )
  -webkit-border-radius: $radius
  border-radius: $radius
  background-clip: padding-box

@mixin box-shadow( $shadow )
  -moz-box-shadow: $shadow
  -webkit-box-shadow: $shadow
  box-shadow: $shadow

// Background image mixin with optional arguments.
@mixin bgimg( $imgurl: 'http://placehold.it/800x600', $bgsize: cover, $bgpos: 'center center', $bgrepeat: 'no-repeat' )
  background-image: url( $imgurl )
  // Using Rails image URL helper: background-image: image-url( $imgurl )
  background-size: $bgsize
  background-repeat: unquote( $bgrepeat )
  background-position: unquote( $bgpos )