SASS Mixins

mixins.scss

/*
 * _mixins.scss
 * ============
 * Some mixins I am using at work. Giving < CSS3 support where I can.
 *
 */

$golden-ratio: 1.61803399; // Everyone is doing it

$base-spacing: 20px;

$base-font-family: unquote('Helvetica Neue'), unquote('sans-serif');
$heading-font-family: unquote('Helvetica Neue'), unquote('sans-serif');

$base-font-size: 13px;
$base-line-height: 20px;
$base-text-shadow: 0 1px 1px rgba(255,255,255,0.5);
$base-border-radius: 10px;

$big-text-multiplier: 1.1;

$font-color: #605f5c;
$link-color: #1f88b3;
$link-hover-color: #e3f0f5;
$link-hover-background-color: #e3f0f5;
$link-active-color: #607890;
$link-visited-color: #607890;

$border-color: #eeeeee;

$selected-font-color: #fff;
$selected-background-color: #ff5E99;

$list-left-margin: 2em;

$wrapper-width: 960px;

@mixin reset {
  border: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

@mixin block {
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

@mixin wrapper {
  width: $wrapper-width;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

@mixin text-standards($multiplier) {
  $font-size: $base-font-size * $multiplier;
  @if $font-size < 11px {
    $font-size: 11px;
  }
  
  font: normal $font-size $base-font-family;
  line-height: $base-line-height * $multiplier;
}

@mixin heading-text-standards($level: 1) {
  $multiplier: 1 + ((7 - $level) / 10);
  $font-family: $base-font-family;
  
  @if $level < 3 { // H1, H2 are bold.
    font-weight: bold;
    $font-family: $heading-font-family;
  }
  
  font: normal $base-font-size * $multiplier $font-family;
  line-height: $base-line-height * $multiplier;
}

// == Pretty mixins, CSS3 stuff

@mixin text-shadow($shadow: $base-text-shadow, $background: #FFF) {
  $last-el: nth($shadow, length($shadow));
  @if type-of($last-el) == 'color' {
    @if alpha($last-el) < 1.0 {
      $ie-shadow: '';
      @each $i in $shadow {
        @if $i != $last-el {
          $ie-shadow: #{$ie-shadow} $i;
        }
      }
      text-shadow: $ie-shadow mix(rgb(red($last-el),green($last-el),blue($last-el)), $background, (alpha($last-el) * 100%));
    }
  }
  text-shadow: $shadow;
}

@mixin box-shadow($depth, $x: 0px, $y: 0px) {
  -webkit-box-shadow:$x $y $depth rgba(0,0,0,0.2);
  -moz-box-shadow:$x $y $depth rgba(0,0,0,0.2);
  box-shadow:$x $y $depth rgba(0,0,0,0.2);
}

@mixin border-radius($radius: $base-border-radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

@mixin background-linear-gradient($from, $to, $default: 'none') {
  @if $default == 'none' {
    $default: $from;
  }
  
  background-color: $default;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
}

@mixin background-transparency($color, $alpha: 'none') {
  @if $alpha == 'none' {
    $alpha: alpha($color);
  }
  
  background: rgb(red($color), green($color), blue($color)); // Non-RGBA support
  background: rgba(red($color), green($color), blue($color), $alpha);
}

Yes, text-shadow does work. It is full of awesome, win, unicorns and kittens with some Non-RGBA support to boot.