First attempt at creating a SASS setup

1stattempt.sass

@charset "UTF-8"

//Theme Colors & Variables
//REQUIRED TO BE SET
!colorFont = "black"
!colorBG = "white"
!color1 = #4EACC7
!color2 = #7581bd
!headerSize = 3em

//Dashboard Custom Mixins
@import mixins.sass
//import typography settings 
@import typography.sass
//import html setup (html, body, table, form etc)
@import base.sass

//custom layout
#container
  width: 750px
  margin: 0 auto
  position: relative

#nav
  +float("left","both")
  height: 64px
  width: 720px
  padding: 15px 15px 0 15px
  background: url(/images/shadowTop.png) no-repeat

#wrapper
  width: 100%
  padding-bottom: 38px
  background: url(/images/shadowBottom.png) no-repeat left bottom

#content
  +float("left")
  margin: 0 0 -22px 0
  padding: 0 15px
  background: transparent url(/images/shadowRepeat.png)repeat-y

  #wrapper
    padding: 0
    background: 
      color = !color2 
      image: url(/images/bgContent.png)
      repeat: repeat-y
    +float("left")

#homeA
  width: 220px
  display: block
  padding: 0 10px 0 10px
  background:
    color = !color1

  img#flowers
    margin: 0 0 10px -10px
  p
    +fontcode(1.5em,1.5em)

#homeB
  width: 480px
  height: 312px
  position: relative

  span#logo
    position: absolute
    bottom: 0
    right: 0

#homeC
  clear: both

  span#logo
    position: absolute
#homeD
  padding: 0 10px 0 0
  background:
    color = !color2
  height: 176px

  h2
    padding: 10px 0 0 0

  img
    float: left
    margin: 0 10px 0 0
  p
    +fontcode(1.5em,1.5em)
#rightCol
  +float("left")
  width: 480px
  
  &.contentPage
    padding: 10px
    width: 460px

#leftCol
  width: 240px
  +float("left")
  h2
    margin: 30px 0 0 10px
  a
    margin-left: 10px
    
#footer
  width: 700px
  height: 55px
  display: block
  margin-top: 22px
  padding: 10px 25px 15px 25px
  position: relative
  background: url(/images/shadowFooter.png)no-repeat left bottom
  +float("left","both")
  
  p
    font-size: 1em

.left
  +float("left")

.right
  +float("right")

base.sass

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
  border: 0
  outline: 0
  font:
    weight: inherit
    style: inherit
    size: 100%
    family: inherit
  vertical-align: baseline
  +spaceless

\:focus
  outline: 0

body
  width: 100%
  font: normal 12px/18px Arial, sans-serif 
  margin: 33px 0 0 0
  padding: 0
  color= !colorBG
  line-height: 1
  color = !colorFont
  background:
    color= !colorBG
    image: url(/images/bgTile.jpg)
  
  &.tinymce
    background:
      color = !color2
      
  ol, ul
    list-style: none

  table
    border:
      collapse: separate
      spacing: 0

  caption, th, td
    text-align: left
    font:
      weight: normal

  blockquote
    &:before, &:after
      content: ""

  q
    &:before, &:after
      content: ""

  blockquote, q
    quotes: "" ""
  form
    &.contactForm ul
      list-style: none
      +spaceless

      li
        +spaceless

    fieldset.hidden
      border: none
      +spaceless

      ol
        list-style: none
        +spaceless

      label, input
        width: auto

mixins.sass

//MixIn for including the font code.
//takes arguements for font size and lineheight in em
//if size or lineheight is left out, they will not be rendered to final CSS
=fontcode(!size = 0em, !lineheight = 0em, !color = !colorBG)
  font: 
    family: 'Tempus', Georgia, Times, serif
  @if !size == 0em
    size: 1.5em
  @if !color == !colorBG
    color = !colorBG
  @if !lineheight == 0em
    line-height: 1.5em
=spaceless
  margin: 0
  padding: 0
=float(!direction,!clear = false)
  float= !direction
  @if !clear != false
    clear= !clear

typography.sass

@font-face
  font-family: 'Tempus'
  src: url('/fonts/Tempus.eot')
  src: local('Tempus Sans ITC Regular'), local('TempusSansITC'),url('/fonts/Tempus.woff') format('woff'), url('/fonts/Tempus.otf') format('opentype'),url('/fonts/Tempus.ttf') format('truetype'),url('/fonts/Tempus.svg#Tempus') format('svg')

h1, h2, h3, h4, h5
  +fontcode
  color= !colorBG

h1
  font-size= !headerSize
  line-height: 1.5em

h2
  font-size= !headerSize / 1.5

h3
  font-size= !headerSize / 1.75

h4
  font-size= !headerSize / 2

h5
  font-size= !headerSize / 2.25
  text-transform: uppercase

p
  +fontcode(1.25em, 1.5em)
  margin: 0 0 1.5em 0

a
  color= !colorBG
  text-decoration: underline

  &:hover
    text-decoration: none