scottkellum

$left: rgba(255,0,0,.5)
$right: rgba(0,255,255,.5)

=transition($transition: all 1s)
  -webkit-transition: $transition
  -moz-transition: $transition
  -o-transition: $transition
  transition: $transition

body

scottkellum

=gloss($color)
  background-color: $color
  filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{lighten($color, 5%)}unquote("', endColorstr='")#{darken($color, 5%)}unquote("')")
  -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{lighten($color, 5%)}', endColorstr='#{darken($color, 5%)}')")
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, lighten($color, 15%)), color-stop(0.5, $color), color-stop(0.49, darken($color, 5%)))
  background-image: -webkit-linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%)
  background-image: -moz-linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%)
  background-image: linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%)

scottkellum

=prefix($attribute, $value)
  -webkit-#{$attribute}: $value
  -moz-#{$attribute}: $value
  -ms-#{$attribute}: $value
  -o-#{$attribute}: $value
  #{$attribute}: $value

+prefix(box-shadow, 2px 0 5px #000)

scottkellum

$golden: 1.618
$thirds: 3 / 2
$fourths: 4 / 3

=modular-scale($attribute, $value, $ratio, $multiple)
  $modular-scale: $value
  @for $i from 1 through $multiple
    $modular-scale: $modular-scale * $ratio
  #{$attribute}: $modular-scale

scottkellum

// Sass exponent support
@function exponent($base, $exponent)
  // reset value
  $value: $base
  // positive intergers get multiplied
  @if $exponent > 1
    @for $i from 2 through $exponent
      $value: $value * $base
  // negitive intergers get divided. A number divided by itself is 1
  @if $exponent < 1

scottkellum

=gradient($startcolor, $endcolor, $startpos: top)
  background-color: $startcolor / 2 + $endcolor / 2
  @if $startpos == "top"
    filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
    -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
    background-image: -webkit-gradient(linear, top left, bottom left, from($startcolor), to($endcolor))
  @if $startpos == "left"
    filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
    -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
    background-image: -webkit-gradient(linear, top left, top right, from($startcolor), to($endcolor))

scottkellum

// Original gist https://gist.github.com/280797

$prefixes: -webkit- -moz- -ms- -o- !default

=prefix($property, $value, $prefixes)
  @each $prefix in $prefixes
    #{$prefix}#{$property}: $value
  #{$property}: $value

=prefix-value($property, $value, $prefixes)

scottkellum

// MEASUREMENTS
$base-size: 16px !default
$line-height: 1.3em !default
$margin: 5% !default
$gutter-width: 10% !default
$gutter-height: $line-height
$module-width: respond !default
$module-height: $line-height * 3 !default
$columns: 12 !default
$wrapper-align: center !default

scottkellum

// Define color schemes quickly

// Color schemes to choose from
//    complement
//    triad
//    tetrad
//    analogic
//    accented-analogic

$color-location: primary !default

scottkellum

// Normalize 7" tablets.

// Default is halfway between both resolutions. I find the default 3/2 on the tab to be too much.
$tab7-virtual-resolution: (6/5) !default

@if unit($module-w) != "em"
  @warn "Your grid MUST be based on ems to scale to 7 inch tablets."
@else
  // Standard 7" 1024x600 tablet
  @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait)