Some SCSS Mixins

steves_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;
  }
}