fixed rake preview and updated sass to sass3 syntax

Gemfile

@@ -5,6 +5,6 @@ gem 'activesupport', "2.3.2"
 gem 'henrik-jekyll'
 gem 'compass'
 gem 'compass-colors'
-gem 'rdiscount'
+gem 'kramdown'
 gem 'fssm'
 gem 'serve'

Rakefile

@@ -43,7 +43,7 @@ end
 
 desc "generate website in output directory"
 task :generate => [:generate_site, :generate_style] do
-  puts ">>> Site Generating Complete! <<<\n\n"
+  puts ">>> Site Generating Complete! <<<\n\n>>> Refresh your browser <<<"
 end
 
 # usage rake post[my-new-post] or rake post['my new post'] or rake post (defaults to "new-post")
@@ -166,6 +166,7 @@ task :start_serve => :stop_serve do
   cd "#{site}" do
     print "Starting serve..."
     ok_failed system("serve #{port} > /dev/null 2>&1 &")
+    system "open http://localhost:#{port}"
   end
 end
 
@@ -181,8 +182,7 @@ task :stop_serve do
 end
 
 desc "preview the site in a web browser"
-multitask :preview => [:start_serve] do
+multitask :preview => [:generate, :start_serve, :watch] do
-  system "open http://localhost:#{port}"
 end
 
 

stylesheets/_base.sass

@@ -1,3 +1,3 @@
 //compass default reset
 +global-reset
-@import "compass/utilities"
+@import compass

stylesheets/_layout.sass

@@ -1,51 +1,51 @@
-!page_pad = 30px
+$page_pad: 30px
-!page_width = 980px
+$page_width: 980px
-!sidebar_margin = 20px
+$sidebar_margin: 20px
-!sidebar_width = 280px
+$sidebar_width: 280px
-$default_border_radius = 4px
+$default_border_radius: 4px
 
 html body
-  background-color: #{!body_bg}
+  background-color: $body_bg
-  color: #{!body_color}
+  color: $body_color
   a
-    color: #{!link_color}
+    color: $link_color
     &:hover, &:focus
-      color: #{saturate(darken(!link_color, 15), 20)}
+      color: saturate(darken($link_color, 15), 20)
     &:visited
-      color: #{darken(adjust_hue(!link_color, 70), 10)}
+      color: darken(adjust_hue($link_color, 70), 10)
 
 #header, #footer, #nav
   .content
     position: relative
     margin: 0 auto
-    width: #{!page_width - !page_pad}
+    width: $page_width - $page_pad
-    padding: 0 #{!page_pad/2}
+    padding: 0 $page_pad/2
 
 #page, #header, #footer, #nav
-  min-width: #{!page_width}
+  min-width: $page_width
 #page, #content, .content
   +pie-clearfix
 #content
   margin: 0 auto
-  width: #{!page_width - !sidebar_width - !page_pad/2}
+  width: $page_width - $sidebar_width - $page_pad/2
-  padding: 0 #{!sidebar_width} 0 #{!page_pad/2}
+  padding: 0 $sidebar_width 0 $page_pad/2
 #main
   float: left
   width: 100%
   .content
-    padding-right: #{!sidebar_margin}
+    padding-right: $sidebar_margin
 
 #sidebar
   float: left
-  width: #{!sidebar_width - !sidebar_margin}
+  width: $sidebar_width - $sidebar_margin
   margin: 0 -100% 0 0
-  padding: #{!page_pad} 0 #{!page_pad} #{!sidebar_margin}
+  padding: $page_pad 0 $page_pad $sidebar_margin
 
 #page.expanded
   #content
-    width: #{!page_width - !page_pad/2}
+    width: $page_width - $page_pad/2
-    padding: 0 0 0 #{!page_pad/2}
+    padding: 0 0 0 $page_pad/2
   #sidebar
     float: none
     margin: 0
-    padding: 0 0 #{!page_pad}
+    padding: 0 0 $page_pad

stylesheets/_library.sass

@@ -1,7 +1,7 @@
-@import "compass/utilities"
+@import compass/utilities
-@import "compass/css3"
+@import compass/css3
         
-@import "library/reset"
+@import library/reset
-@import "library/list_borders"
+@import library/list_borders
-@import "library/typography"
+@import library/typography
-@import "library/link_colors"
+@import library/link_colors

stylesheets/_partials.sass

@@ -1,13 +1,13 @@
-@import partials/shared.sass
+@import partials/shared
-@import partials/syntax.sass
+@import partials/syntax
-@import partials/search.sass
+@import partials/search
-@import partials/sidebar.sass
+@import partials/sidebar
-@import partials/twitter.sass
+@import partials/twitter
 
 /* layout partials */
-@import partials/header.sass
+@import partials/header
-@import partials/navigation.sass
+@import partials/navigation
-@import partials/page.sass
+@import partials/page
-@import partials/sidebar.sass
+@import partials/sidebar
-@import partials/blog.sass
+@import partials/blog
-@import partials/footer.sass
+@import partials/footer

stylesheets/_typography.sass

@@ -1,7 +1,7 @@
-!base_font_size = 16px
+$base_font_size: 16px
-!base_font_size_small = 13px
+$base_font_size_small: 13px
-!base_font_color = #333
+$base_font_color: #333
-$default_border_radius = 6px
+$default_border_radius: 6px
 
 +general-typography
 =heading-font
@@ -10,7 +10,7 @@ $default_border_radius = 6px
   +serif-font
 
 body
-  font-size= !base_font_size
+  font-size: $base_font_size
   +serif-font
   
 h1,h2,h3,h4,h5,h6
@@ -33,13 +33,13 @@ blockquote
     color: #ddd
   cite
     +sans-font
-    font-size= !base_font_size - 2px
+    font-size: $base_font_size - 2px
     display: block
-    padding-top= !base_font_size
+    padding-top: $base_font_size
     &:before
       content: "\30FC"
       padding-right: 2px
     a
       color: inherit !important
       &:hover
-        color= !link_color !important
+        color: $link_color !important

stylesheets/library/_float.sass

@@ -3,9 +3,9 @@
 @import modules/_clearfix.sass
 
 // Available as alternate syntax with just +float
-=float(!side = "left")
+=float($side: "left")
-  :display inline
+  display: inline
-  :float= !side
+  float: !side
 
 // Implementation of float:left with fix for double-margin bug
 =float-left

stylesheets/library/_list_borders.sass

@@ -1,6 +1,6 @@
-=list-borders(!color1,!color2)
+=list-borders($color1, $color2)
-  border-left= "1px solid" !color1
+  border-left: 1px solid $color1
-  border-right= "1px solid" !color2
+  border-right: 1px solid $color2
   &.alpha
     border-left: none
   &.omega

stylesheets/library/_reset.sass

@@ -22,37 +22,37 @@
   table
     +reset-table
   a img
-    :border none
+    border: none
 
 =reset-box-model
-  :margin 0
+  margin: 0
-  :padding 0
+  padding: 0
-  :border 0
+  border: 0
 
 =reset
   +reset-box-model
-  :font
+  font:
-    :weight inherit
+    weight: inherit
-    :style inherit
+    style: inherit
-    :size 100%
+    size: 100%
-    :family inherit
+    family: inherit
-  :vertical-align baseline
+  vertical-align: baseline
 
 =reset-quotation
   +reset
-  :quotes "" ""
+  quotes: "" ""
   &:before,
   &:after
-    :content ""
+    content: ""
 
 =reset-table-cell
   +reset
-  :text-align left
+  text-align: left
-  :font-weight normal
+  font-weight: normal
-  :vertical-align middle
+  vertical-align: middle
 
 =reset-table
   +reset
-  :border-collapse separate
+  border-collapse: separate
-  :border-spacing 0
+  border-spacing: 0
-  :vertical-align middle
+  vertical-align: middle

stylesheets/library/_typography.sass

@@ -1,70 +1,74 @@
-!base_font_size ||= 16px
+$base-font-size: 16px !default
-!small ||= floor(!base_font_size * .85)
+$small: floor($base-font-size * 0.85) !default
-!big ||= floor(!base_font_size * 1.25)
+$big: floor($base-font-size * 1.25) !default
-!base_font_color ||= #333
+$base-font-color: #333333 !default
-!h6 = ceil(!base_font_size*1)
+$h6: ceil($base-font-size * 1)
-!h5 = ceil(!base_font_size*1)
+$h5: ceil($base-font-size * 1)
-!h4 = ceil(!base_font_size*1.2)
+$h4: ceil($base-font-size * 1.2)
-!h3 = ceil(!base_font_size*1.8)
+$h3: ceil($base-font-size * 1.8)
-!h2 = ceil(!base_font_size*2.8)
+$h2: ceil($base-font-size * 2.8)
-!h1 = ceil(!base_font_size*3.2)
+$h1: ceil($base-font-size * 3.2)
 
 =heading-font
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+
 =sans-font
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
+
 =serif-font
   font-family: Georgia, Times, "Times New Roman", serif
+
 =fixed-font
   font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
+
 =mono-font
   +fixed-font
 
-=general-typography(!font_size = !base_font_size)
+=general-typography($font-size: $base-font-size)
-  +set-heading-sizes(!font_size)
+  +set-heading-sizes($font-size)
-  +typography-defaults(!font_size)
+  +typography-defaults($font-size)
 
-=set-heading-sizes(!font_size = !base_font_size)
+=set-heading-sizes($font-size: $base-font-size)
-  !h6 = ceil(!font_size*1)
+  $h6: ceil($font-size * 1)
-  !h5 = ceil(!font_size*1)
+  $h5: ceil($font-size * 1)
-  !h4 = ceil(!font_size*1.2)
+  $h4: ceil($font-size * 1.2)
-  !h3 = ceil(!font_size*1.8)
+  $h3: ceil($font-size * 1.8)
-  !h2 = ceil(!font_size*2.8)
+  $h2: ceil($font-size * 2.8)
-  !h1 = ceil(!font_size*3.2)
+  $h1: ceil($font-size * 3.2)
   h1, h2, h3, h4
     &:first-child
       margin-top: 0
   h1,h2,h3,h4,h5,h6
     line-height: 1.1em
-    margin-bottom: .7em
+    margin-bottom: 0.7em
-    margin-top: .3em
+    margin-top: 0.3em
   h1
-    font-size= !h1
+    font-size: $h1
   h2
-    font-size= !h2
+    font-size: $h2
   h3
-    font-size= !h3
+    font-size: $h3
   h4
-    font-size= !h4
+    font-size: $h4
   h5
-    font-size= !h5
+    font-size: $h5
   h6
-    font-size= !h6
+    font-size: $h6
 
-=typography-defaults(!font_size = !base_font_size)
+=typography-defaults($font-size: $base-font-size)
   body
     line-height: 1.45em
-    color= !base_font_color
+    color: $base-font-color
   p
-    +p-style(!font_size)
+    +p-style($font-size)
   table
-    +table-style(!font_size)
+    +table-style($font-size)
   ol
-    +ol-style(!font_size)
+    +ol-style($font-size)
   ul
-    +ul-style(!font_size)
+    +ul-style($font-size)
   dl
-    +dl-style(!font_size)
+    +dl-style($font-size)
   blockquote
     +quote-style
   q
@@ -80,57 +84,57 @@
   del
     text-decoration: line-through
   span.highlight, em.highlight, strong.highlight
-    background-color: #ff6
+    background-color: #ffff66
     padding: 2px
     margin: 0 -2px
   abbr, acronym
     border-bottom: 1px dotted
     cursor: help
   address
-    margin-top= !font_size * 1.625
+    margin-top: $font-size * 1.625
     font-style: italic
   pre, code, tt
     +fixed-font
-    line-height= !font_size * 1.5
+    line-height: $font-size * 1.5
   tt
     display: block
-    margin= !font_size * 1.625 0
+    margin: $font-size * 1.625 0
   sub, sup
     line-height: 0
   hr
-    margin-bottom: .2em
+    margin-bottom: 0.2em
   small, .small
-    font-size= floor(!font_size * .85)
+    font-size: floor($font-size * 0.85)
   big, .big
-    font-size= floor(!font_size * 1.25)
+    font-size: floor($font-size * 1.25)
 
-=ol-style(!font_size = !base_font_size)
+=ol-style($font-size: $base-font-size)
   list-style: inside decimal
-  margin= 0 0 !font_size * 1.625
+  margin: 0 0 $font-size * 1.625
   li ol
-    margin= 0 0 !font_size * 1.625
+    margin: 0 0 $font-size * 1.625
 
-=ul-style(!font_size = !base_font_size)
+=ul-style($font-size: $base-font-size)
   list-style: inside
-  margin= 0 0 !font_size * 1.625
+  margin: 0 0 $font-size * 1.625
   li ul
-    margin= 0 0 !font_size * 1.625
+    margin: 0 0 $font-size * 1.625
 
-=dl-style(!font_size = !base_font_size)
+=dl-style($font-size: $base-font-size)
-  margin= 0 0 !font_size * 1.625
+  margin: 0 0 $font-size * 1.625
   dt
     font-weight: bold
   dd
-    margin-left= !font_size * 1.625
+    margin-left: $font-size * 1.625
 
-=quote-style(!font_size = !base_font_size)
+=quote-style($font-size: $base-font-size)
-  padding= !font_size*1.5 !font_size*1.5 !font_size * 1.5 !font_size * 1.8
+  padding: $font-size * 1.5 $font-size * 1.5 $font-size * 1.5 $font-size * 1.8
   position: relative
-  margin-bottom= !font_size * 0.8125 
+  margin-bottom: $font-size * 0.813
   &:before
     content: "\201C"
-    font-size= !font_size * 3
+    font-size: $font-size * 3
-    margin= 5px 0 0 -.525em
+    margin: 5px 0 0 -0.525em
     position: absolute
     font-family: Times, Georgia, serif
     line-height: 0
@@ -138,29 +142,29 @@
     padding: 0
     margin: 0
 
-=p-style(!font_size = !base_font_size)
+=p-style($font-size: $base-font-size)
   padding-bottom: 1.3em
   img
     float: left
     margin:
-      top= !font_size * .5
+      top: $font-size * 0.5
-      right= !font_size * .8125
+      right: $font-size * 0.813
-      bottom= !font_size* .8125
+      bottom: $font-size * 0.813
-      left= 0
+      left: 0
     padding: 0
     &.right
       margin:
-        right= 0
+        right: 0
-        left= !font_size * .8125
+        left: $font-size * 0.813
 
-=table-style(!font_size = !base_font_size)
+=table-style($font-size: $base-font-size)
-  margin= 0 0 !font_size * 1.625
+  margin: 0 0 $font-size * 1.625
   border-collapse: collapse
   th
     font-weight: bold
   tr, th, td
     margin: 0
-    padding= 0 !font_size * 1.625 0 !font_size
+    padding: 0 $font-size * 1.625 0 $font-size
   tfoot
     font-style: italic
   caption

stylesheets/partials/_blog.sass

@@ -1,23 +1,23 @@
 .blog
   h2
     padding-top: 0
-    margin-bottom: .1em
+    margin-bottom: 0.1em
   .title
     text-decoration: none
     &:hover
       text-decoration: underline
   .article
-    padding: #{!base_font_size * 1.5 0} #{!base_font_size * 1.5}
+    padding: $base-font-size * 1.5 0 $base-font-size * 1.5
-    border-bottom: 1px solid #{!article_border}
+    border-bottom: 1px solid $article-border
     &:first-child
       padding-top: 0
   #disqus_thread
-    padding-top: #{!base_font_size}
+    padding-top: $base-font-size
   .meta
     +sans-font
-    border-bottom: 1px dashed #ddd
+    border-bottom: 1px dashed #dddddd
     text-transform: uppercase
-    color: #777
+    color: #777777
     padding: 8px 0 5px
     margin-bottom: 1.5em
     font-size: 75%

stylesheets/partials/_footer.sass

@@ -1,12 +1,12 @@
 #footer
-  +linear-gradient(color_stops(darken(!body_bg, 5), !body_bg))
+  +linear-gradient(color-stops(darken($body-bg, 5), $body-bg))
-  font-size: #{!base_font_size_small}
+  font-size: $base-font-size-small
-  color: #{!footer_color}
+  color: $footer-color
-  border-top: 10px solid #{!footer_bg}
+  border-top: 10px solid $footer-bg
   padding: 15px 0
   position: relative
   z-index: 2
   a
-    color: #ddd
+    color: #dddddd
     &:hover
-      color: #fff
+      color: white

stylesheets/partials/_header.sass

@@ -1,11 +1,11 @@
 #header
   background-color: $header_bg
-  border-bottom: 1px solid #{$header_border}
+  border-bottom: 1px solid $header_border
   padding: 25px 0
   h1
     display: inline-block
     margin: 0
     a.title
       font-weight: normal
-      color: #{$title_color}
+      color: $title_color
       text-decoration: none

stylesheets/partials/_navigation.sass

@@ -2,11 +2,11 @@
   +clearfix
   position: relative
   z-index: 1
-  background-color: #{!nav_bg}
+  background-color: $nav-bg
-  +linear-gradient(color_stops(#fcfcfc, #f4f4f4 .3, #ddd))
+  +linear-gradient(color-stops(#fcfcfc, #f4f4f4 0.3, #dddddd))
   border:
-    top: 1px solid #{!nav_border_top}
+    top: 1px solid $nav-border-top
-    bottom: 1px solid #{!nav_border_bottom}
+    bottom: 1px solid $nav-border-bottom
   ul
     position: relative
     +horizontal-list
@@ -14,8 +14,8 @@
     padding: 6px 0
     li
       padding: 0 15px
-      border-left: 1px solid #{!nav_border_left}
+      border-left: 1px solid $nav-border-left
-      border-right: 1px solid #{!nav_border_right}
+      border-right: 1px solid $nav-border-right
       &.alpha
         border-left: none
         padding-left: 0
@@ -23,16 +23,16 @@
         border-right: 0
       &.subscribe
         position: absolute
-        left: #{!page_width - !sidebar_width - !sidebar_margin/2}
+        left: $page-width - $sidebar-width - $sidebar-margin / 2
         border: none
         a
           display: inline-block
           padding-left: 28px
-          background: url("/images/rss.png") left top no-repeat
+          background: image-url("rss.png") left top no-repeat
       a
         display: inline-block
-        color: #{!nav_color}
+        color: $nav-color
         line-height: 150%
         text-decoration: none
         &:hover
-          color: #{!nav_color_hover}
+          color: $nav-color-hover

stylesheets/partials/_page.sass

@@ -1,8 +1,8 @@
 #page
-  background-color: #{!main_bg}
+  background-color: $main_bg
 #main
-  background-color: #{!main_bg}
+  background-color: $main_bg
-  border-right: 1px solid #{!sidebar_border}
+  border-right: 1px solid $sidebar_border
   padding:
     top: 25px
     bottom: 25px

stylesheets/partials/_search.sass

@@ -1,9 +1,9 @@
 #search
   position: absolute
-  left: #{!page_width + !sidebar_margin - !sidebar_width}
+  left: $page-width + $sidebar-margin - $sidebar-width
-  top: #{30%}
+  top: 30%
   form
-    background: url(/images/search_bg.png) no-repeat
+    background: image-url("search_bg.png") no-repeat
     padding: 0
     height: 28px
     width: 218px
@@ -15,6 +15,6 @@
     margin-left: 30px
     font-size: 15px
     border: none
-    color: #aaa
+    color: #aaaaaa
     &:focus
       outline: none

stylesheets/partials/_sidebar.sass

@@ -2,21 +2,21 @@
   line-height: 1.45em
   font-size: 90%
   h3
-    font-size: #{!h4+2}
+    font-size: $h4 + 2
     margin: 20px -15px 10px
     padding: 12px 15px
-    background: #fff
+    background: white
     border-bottom: 1px solid #e5e5e5
     border-top: 1px solid #e5e5e5
     &:first-child
       margin-top: 0
   h4
-    font-size: #{!h5}
+    font-size: $h5
 
 #twitter, #delicious
   +border-radius
   background: #f8f8f8
-  border: 1px solid #eee
+  border: 1px solid #eeeeee
   padding: 5px 0
   ul
     list-style-type: none
@@ -24,7 +24,7 @@
   li
     margin: 0 15px
     padding: 10px 0 0
-    border-bottom: #ddd 1px dashed
+    border-bottom: #dddddd 1px dashed
     &:last-child
       border-bottom: 0
 
@@ -32,6 +32,6 @@
   p
     font-style: italic
   li
-    color: #666
+    color: #666666
     font-style: normal
     padding-bottom: 8px

stylesheets/partials/_syntax.sass

@@ -1,9 +1,9 @@
 .code_window
   +border-top-radius(5px)
   +border-bottom-radius(2px)
-  background: #aaa #{image_url("code_bg.png")} top repeat-x
+  background: #aaaaaa image-url("code_bg.png") top repeat-x
   position: relative
-  margin: .3em 0 1.3em
+  margin: 0.3em 0 1.3em
   padding: 0 3px 3px
   font-size: 14px
   border: 1px solid #898989
@@ -12,26 +12,26 @@
   border-right-color: #a5a5a5
   em
     text-align: center
-    +text-shadow(#ccc, 1px, 1px, 1px)
+    +text-shadow(#cccccc, 1px, 1px, 1px)
     display: block
     padding: 1px 0
-    color: #333
+    color: #333333
     font-style: normal
     +sans-font
   .highlight
     margin: 0
 
 pre
-  color: #ccc
+  color: #cccccc
   font-size: 13px
-  background: #222
+  background: #222222
   line-height: 1.5em
-  border: #aaa 1px solid
+  border: #aaaaaa 1px solid
   overflow-x: auto
   overflow-y: hidden
   padding: 25px 20px
   .lineno
-    color: #888
+    color: #888888
     background: #e3e3e3
     display: inline-block
     padding: 0 0 0 10px
@@ -53,11 +53,11 @@ pre
     right: 2px
     +border-bottom-left-radius
     display: block
-    color: #777
+    color: #777777
-    background: #333
+    background: #333333
     &:hover
-      background: #444
+      background: #444444
-      color: #ccc
+      color: #cccccc
 
 // based on: http://github.com/mojombo/tpw/raw/master/css/syntax.css
 .editor
@@ -66,20 +66,20 @@ pre
 
 pre.console
   background-color: black
-  color= lighten(#008000, 25)
+  color: lighten(green, 25)
   letter-spacing: 1px
   padding: 0.5em
   .prompt
-    color= lighten(#000080, 50)
+    color: lighten(navy, 50)
     &:before
-      :color white
+      color: white
       content: "["
     &:after
-      :color white
+      color: white
       content: "]"
   .stdin
     font-weight: bold
-    color= lighten(#008000, 75)
+    color: lighten(green, 75)
 
 .highlight
   padding: 0 0 0.1em
@@ -100,7 +100,7 @@ pre.console
     color: rgb(255, 157, 0)
   // Paren
   .p
-    color= darken(#FF9D00, 33)
+    color: darken(#ff9d00, 33)
   // Operator
   .o
     color: rgb(255, 157, 0)
@@ -121,11 +121,11 @@ pre.console
     font-style: italic
   // Generic.Deleted
   .gd
-    color: #000000
+    color: black
     background-color: #ffdddd
   // Generic.Deleted.Specific
   .gd .x
-    color: #000000
+    color: black
     background-color: #ffaaaa
   // Generic.Emph
   .ge
@@ -138,11 +138,11 @@ pre.console
     color: #999999
   // Generic.Inserted
   .gi
-    color: #000000
+    color: black
     background-color: #ddffdd
   // Generic.Inserted.Specific
   .gi .x
-    color: #000000
+    color: black
     background-color: #aaffaa
   // Generic.Output
   .go
@@ -179,22 +179,22 @@ pre.console
     color: rgb(255, 98, 140)
   // Literal.String
   .s
-    color: #d14
+    color: #dd1144
   // Name.Attribute
   .na
-    color: #008080
+    color: teal
   // Name.Builtin
   .nb
-    color= darken(rgb(128, 255, 187), 20)
+    color: darken(rgb(128, 255, 187), 20)
   // Name.Class
   .nc
-    color= darken(rgb(128, 255, 187), 20)
+    color: darken(rgb(128, 255, 187), 20)
   // Name.Constant
   .no
     color: rgb(128, 255, 187)
   // Name.Entity
   .ni
-    color: #800080
+    color: purple
   // Name.Exception
   .ne
     color: rgb(255, 221, 0)
@@ -209,7 +209,7 @@ pre.console
     color: white
   // Name.Variable
   .nv
-    color: #008080
+    color: teal
   // Operator.Word
   .ow
     color: white
@@ -269,13 +269,13 @@ pre.console
     color: #999999
   // Name.Variable.Class
   .vc
-    color: #008080
+    color: teal
   // Name.Variable.Global
   .vg
-    color: #008080
+    color: teal
   // Name.Variable.Instance
   .vi
-    color: #008080
+    color: teal
   // Literal.Number.Integer.Long
   .il
     color: rgb(255, 98, 140)

stylesheets/partials/_twitter.sass

@@ -2,9 +2,9 @@
   p
     padding-bottom: 10px
     a.topic
-      color: #{!twitter_topic}
+      color: $twitter_topic
   .meta
-    color: #{!light_text}
+    color: $light_text
     font-size: 80%
     display: block
     padding: 8px 0 0

stylesheets/screen.sass

@@ -1,11 +1,11 @@
 /* SASS mixins */
-@import "library"
+@import library
 
 /* primary SASS */
-@import "base"
+@import base
-@import "theme"
+@import theme
-@import "typography"
+@import typography
-@import "layout"
+@import layout
 
 /* specific SASS */
-@import "partials"
+@import partials