Skip to content

Instantly share code, notes, and snippets.

@dylanjha
Last active December 19, 2015 09:49
Show Gist options
  • Save dylanjha/5935840 to your computer and use it in GitHub Desktop.
Save dylanjha/5935840 to your computer and use it in GitHub Desktop.
A bunch of handy mixins for SASS. Who ever thought vendor prefixes were a good idea, anyway?
// Border Radius
@mixin round($radius: 4px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
// Box Shadow
@mixin shadow($shadow1: 0 0 4px #0A0A0A, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false) {
$params: $shadow1;
@if $shadow2
{ $params: $shadow1, $shadow2; }
@if $shadow3 != false
{ $params: $shadow1, $shadow2, $shadow3; }
@if $shadow4 != false
{ $params: $shadow1, $shadow2, $shadow3, $shadow4; }
@if $shadow5 != false
{ $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
-o-box-shadow: $params;
-ms-box-shadow: $params;
box-shadow: $params;
}
// Inset Box Shadow
@mixin inner-shadow($shadow1: 0 0 4px #0A0A0A, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false) {
$params: $shadow1;
@if $shadow2
{ $params: inset $shadow1, inset $shadow2; }
@if $shadow3 != false
{ $params: inset $shadow1, inset $shadow2, inset $shadow3; }
@if $shadow4 != false
{ $params: inset $shadow1, inset $shadow2, inset $shadow3, inset $shadow4; }
@if $shadow5 != false
{ $params: inset $shadow1, inset $shadow2, inset $shadow3, inset $shadow4, inset $shadow5; }
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
-o-box-shadow: $params;
-ms-box-shadow: $params;
box-shadow: $params;
}
// Rotate
@mixin rotate($degrees: 2deg) {
-moz-transform: rotate($degrees);
-webkit-transform: rotate($degrees);
-o-transform: rotate($degrees);
-ms-transform: rotate($degrees);
transform: rotate($degrees);
}
// box-sizing: border-box
@mixin border-box-sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@mixin back-size-cover {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
//text-shadow
@mixin text-shadow($shadow: 0 1px 0 rgba(0, 0, 0, .2)) {
-moz-text-shadow: $shadow;
-khtml-text-shadow: $shadow;
text-shadow: $shadow;
}
@mixin transition($transition: all .5s ease){
-webkit-transition: $transition;
-moz-transition: $transition;
-o-transition: $transition;
-ms-transition: $transition;
transition: $transition;
}
@mixin transition-timing($trans-timing: cubic-bezier(0.230, 1.000, 0.320, 1.000)){
-webkit-transition-timing-function: $trans-timing;
-moz-transition-timing-function: $trans-timing;
-ms-transition-timing-function: $trans-timing;
-o-transition-timing-function: $trans-timing;
transition-timing-function: $trans-timing;
}
@mixin transform($transform: scale(1)){
-webkit-transform: $transform;
-moz-transform: $transform;
-o-transform: $transform;
-ms-transform: $transform;
transform: $transform
}
@mixin rotate($deg: 90deg){
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-o-transform: rotate($deg);
-ms-transform: rotate($deg);
transform: rotate($deg);
}
@mixin opacity($opacity: .8){
-moz-opacity: $opacity;
-webkit-opacity: $opacity;
-khtml-opacity: $opacity;
opacity: $opacity;
}
@mixin pointer-none {
-moz-pointer-events:none;
-webkit-pointer-events:none;
-o-pointer-events:none;
-ms-pointer-events:none;
pointer-events:none;
}
@mixin backface-hide {
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
}
@mixin backface-show {
-webkit-backface-visibility:show;
-moz-backface-visibility:show;
-ms-backface-visibility:show;
backface-visibility:show;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment