Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Some SCSS Mixins
// Border-radius accepts all shorthand combos; defaults to 0.5em
@mixin border-radius($radii: 0.5em) {
-webkit-border-radius: $radii;
-moz-border-radius: $radii;
border-radius: $radii;
@mixin transition($speed) {
-webkit-transition: $speed ease-in-out all;
-moz-transition: $speed ease-in-out all;
-ms-transition: $speed ease-in-out all;
-o-transition: $speed ease-in-out all;
transition: $speed ease-in-out all;
// Apply a CSS3 linear gradient
// $from - The original colour stop of the gradient, eg #FF0000 or #FF0000 20%
// $to - The final colour stop of the gradient
// $solid - A fallback background-color; if none is provided, the $from colour is used
// $start - The starting point of the gradient
// @include linearGradient(red, green);
// @include linearGradient(red, green, transparent);
// @include linearGradient(red 50%, green 100%);
@mixin linearGradient($from, $to, $solid: false, $start: top) {
@if ($solid) {
background-color: $solid;
} @else {
background-color: $from;
background-repeat: no-repeat;
background-image: -webkit-linear-gradient($start, $from, $to);
background-image: -moz-linear-gradient($start, $from, $to);
background-image: -ms-linear-gradient($start, $from, $to);
background-image: -o-linear-gradient($start, $from, $to);
background-image: linear-gradient($start, $from, $to);
@mixin alerts($class, $color) {
.#{$class} {
border: 1px solid darken($color, 10%);
background: $color;
@mixin grid($width) {
.pod#{$width} {
float: left;
width: #{$width}px;
margin-right: 20px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.