Last active
July 5, 2022 08:27
-
-
Save anikets/4714d4f9f6957da694aa to your computer and use it in GitHub Desktop.
Sass Mixins for cross-browser 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: url( $imgurl ) | |
// Using Rails image URL helper: background-image: image-url( $imgurl ) | |
background-size: $bgsize | |
background-repeat: unquote( $bgrepeat ) | |
background-position: unquote( $bgpos ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment