Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:00
What would you like to do?
This is my basic boilerplate of SCSS mixins that I have been compiling
@mixin shadow($color: #B8B8B8) {
-webkit-box-shadow: 0 0 10px 2px $color;
box-shadow: 0 0 10px 2px $color;
@mixin gradient($color1, $color2) {
background: $color1;
background: -moz-linear-gradient(top, $color1 0%, $color2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2));
background: -webkit-linear-gradient(top, $color1 0%,$color2 100%);
background: -o-linear-gradient(top, $color1 0%, $color2 100%);
background: -ms-linear-gradient(top, $color1 0%, $color2 100%);
background: linear-gradient(to bottom, $color1 0%, $color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );
@mixin center-text($max-width) {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: $max-width;
text-align: center;
@mixin transition($target: all, $time: 0.3s, $ease: ease) {
-webkit-transition: $target $time $ease;
-moz-transition: $target $time $ease;
-ms-transition: $target $time $ease;
-o-transition: $target $time $ease;
transition: $target $time $ease;
@mixin border-radius($size) {
-webkit-border-radius: $size;
-moz-border-radius: $size;
-ms-border-radius: $size;
-o-border-radius: $size;
border-radius: $size;
@mixin rotate($amount) {
-webkit-transform: rotate($amount);
-moz-transform: rotate($amount);
-ms-transform: rotate($amount);
-o-transform: rotate($amount);
transform: rotate($amount);
@mixin border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
@mixin flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
@mixin clearfix {
&:before, &:after {
display: table;
line-height: 0;
content: "";
&:after {
clear: both;
@mixin retina($file, $type, $width: auto, $height: auto) {
background-image: url('../images/' + $file + '.' + $type);
@media all and (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5) {
& {
background-image: url('../images/' + $file + '@2x.' + $type);
-webkit-background-size: $width $height;
-moz-background-size: $width $height;
-ms-background-size: $width $height;
-o-background-size: $width $height;
background-size: $width $height;
@mixin retina-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
@media all and (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5) {
& {
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment