$yellow: #fc0

=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
