Last active
January 25, 2017 22:46
-
-
Save anikets/2da2fb7ac318c2f507a7 to your computer and use it in GitHub Desktop.
Scss mixins for CSS3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment