mixins.sass

$yellow: #fc0

/* test that variable context evaluates correctly */
=foo($var, $val)
  :#{$var} $val
=bar($var)
  +foo('one', $var)
test
  +bar(two)

=bordered
  :border
    :top
      :width 2px
      :color $yellow
    :left
      :width 1px
      :color #000
  -moz-border-radius: 10px

=header-font
  :color #f00
  :font
    :size 20px

=compound
  +header-font
  +bordered

=complex
  +header-font
  text:
    decoration: none
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden
  * html &
    height: 1px
    +header-font
=deep
  a:hover
    :text-decoration underline
    +compound


#main
  :width 15em
  :color #0000ff
  p
    +bordered
    :border
      :style dotted
      :width 2px
  .cool
    :width 100px

#left
  +bordered
  :font
    :size 2em
    :weight bold
  :float left

#right
  +bordered
  +header-font
  :float right

.bordered
  +bordered

.complex
  +complex

.more-complex
  +complex
  +deep
  display: inline
  -webkit-nonsense:
    top-right: 1px
    bottom-left: 1px