imathis

// expects a number from 0 to 100
=opacity(!opacity)
  :opacity= !opacity / 100
  :-moz-opacity= !opacity / 100
  :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{!opacity})"
  :filter= "alpha(opacity=#{!opacity})"

imathis

//**
  Example use:
  a
    +sprite-bg("icons-32.png")
  a.twitter
    +sprite-column(1)
  a.facebook
    +sprite-column(2)
  ...

imathis

//**
  Example 1:
  a.twitter
    +sprite-img("icons-32.png", 1)
  a.facebook
    +sprite-img("icons-32png", 2)
  ...
  Example 2:
  a
    +sprite-background("icons-32.png")

imathis

!default_border_radius ||= 5px

// Round all borders by amount
=border-radius(!radius = !default_border_radius)
  border-radius= !radius
  -moz-border-radius= !radius
  -webkit-border-radius= !radius

// Round radius at position by amount.
// values for !vert: "top", "bottom"

imathis

=gradient(!type, !coords, !color_start, !color_end, !color_stop = false)
  !gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})"
  @if !color_stop
    !gradient= !gradient + ", " + !color_stop
  background: -webkit-gradient(#{!type}, #{!gradient})
  background: -moz-#{!type}-gradient(#{!gradient})

//*
  Creates a radial gradient
  Usage example:

imathis

@import compass/utilities.sass
@import compass/css3.sass
=gradient(!type, !webkit_coords, !moz_coords, !color_start, !color_end, !color_stop = false)
  !webkit_gradient= "#{!webkit_coords}, from(#{!color_start}), to(#{!color_end})"
  !moz_gradient = "#{!moz_coords}, #{!color_start}, #{!color_end}"
  @if !color_stop
    !webkit_gradient= !webkit_gradient + ", " + !color_stop
  background-image: -webkit-gradient(#{!type}, #{!webkit_gradient})
  background: -moz-#{!type}-gradient(#{!moz_gradient})

imathis

document.observe('dom:loaded', function() {
	$$('a[rel^=toggle]').each(toggleLinkBehavior)
});
function parseRel(key, rel){
  var keypos = rel.indexOf(key)+key.length+1; //find occurance of key
  var keys = rel.slice(keypos).split(']')[0].strip(); //split at end of key segment and trip whitespace
  return keys.split(','); //return keys as an array
}
function toggleLinkBehavior(el){
  el.toggle_ids = parseRel('toggle', el.readAttribute('rel'));

imathis

// Sass:
+linear-gradient(colors(#ddd, #aaa)) //assumes "top"
+linear-gradient(colors(#ddd, #aaa), "left")
+linear-gradient(colors(#ddd, #aaa), "top left")
+linear-gradient(colors(#ddd, #aaa), "top right")

// Color stops - I'm using default vertical gradients for simplicity

+linear-gradient(colors(#ddd, #ccc, #aaa))
+linear-gradient(colors(#ddd, #ccc 20%, #aaa))

imathis

rebuild_site = lambda do |base, relative|
  if relative && relative =~ /\.s[ac]ss/
    puts ">>> Change Detected to #{relative} : updating stylsheets <<<"
    system "compass"
  else
    if !relative
      puts ">>> Compiling <<<"
    else
      puts ">>> Change Detected to #{relative} <<<"
    end

imathis

=clearfix
  overflow: hidden
  +has-layout

/* clears while allowing overflow (great for use with box shadows)
=pie-clearfix
  &:after
    content: " "
    display: block
    height: 0