Scss mixins for CSS3

css3-scss-mixins.scss

/*
 * 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: image-url( $imgurl );
  // Using Rails image URL helper: background-image: image-url( $imgurl );
  background-size: $bgsize;
  background-repeat: unquote( $bgrepeat );
  background-position: unquote( $bgpos );
}

@mixin horGradient($left, $right) {
  background-image: -webkit-linear-gradient(left,$left, $right);
  background-image: -moz-linear-gradient(left, $left, $right);
  background-image: -ms-linear-gradient(left, $left, $right);
  background-image: -o-linear-gradient(left, $left, $right);
}