Switching from compass to node-sass and Bourbon

src/humans.txt

@@ -13,4 +13,4 @@
 
 # TECHNOLOGY COLOPHON
 
-    HTML5, CSS3, SVG, Compass, Open Iconic
+    HTML5, CSS3, SVG, Sass, Open Iconic

src/sass/_base.scss

@@ -1,3 +1,5 @@
+@import 'bourbon';
+
 $green: #bada55;
 $dark-green: shade($green, 25%);
 $light-green: tint($green, 25%);
@@ -13,5 +15,36 @@ $white: #fff;
 $base-font-size: 16px;
 $base-line-height: 24px;
 
-$default-box-shadow-color: $black;
-$default-box-shadow-blur: 10px;
+@mixin box-shadow {
+  @include prefixer(box-shadow, 0 0 10px $black, webkit moz spec);
+}
+
+@mixin input-placeholder {
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+@function rhythm($scale, $font-size: $base-font-size) {
+  @return ($scale * $base-line-height / $font-size) * 1em;
+}
+
+@mixin adjust-font-size-to($to-size, $lines: auto) {
+  font-size: ($to-size / $base-font-size) * 1em;
+  @if $lines == auto {
+    $lines: ceil($to-size / $base-font-size);
+  }
+  line-height: rhythm($lines, $to-size);
+}

src/sass/main.scss

@@ -1,21 +1,11 @@
 @import 'base';
 @import 'open-iconic';
-@import 'compass/reset';
-@import 'compass/typography/lists/inline-block-list';
-@import 'compass/typography/vertical_rhythm';
-@import 'compass/css3/box-shadow';
-@import 'compass/css3/border-radius';
-@import 'compass/css3/user-interface';
-@import 'compass/css3/animation';
-@import 'compass/css3/transform';
-@import 'compass/css3/images';
-@import 'compass/typography/links/unstyled-link';
-@import 'compass/utilities/general/clearfix';
-
-@include establish-baseline;
+@import 'reset';
 
 body {
   font-family: sans-serif;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
   background: $gray;
   margin-bottom: rhythm(1);
 }
@@ -34,9 +24,13 @@ h1 {
 
 ul.inline-list {
   @include adjust-font-size-to(14px, 2/3);
-  @include inline-block-list;
+  @include clearfix;
 
   li {
+    list-style-type: none;
+    display: inline-block;
+    white-space: nowrap;
+
     &::after {
       content: '//';
       padding: 0 rhythm(1/4);
@@ -58,11 +52,9 @@ ul.inline-list {
 }
 
 #deprecation-notice {
-  @include background(linear-gradient(top, $green, $dark-green));
-  background-color: $green;
+  @include linear-gradient(top, $green, $dark-green);
   padding: rhythm(1);
   margin: rhythm(1);
-  @include border-radius(20px);
   @include box-shadow;
   @include clearfix;
 
@@ -76,8 +68,7 @@ ul.inline-list {
 }
 
 header {
-  @include background(linear-gradient(top, $green, $dark-green));
-  background-color: $green;
+  @include linear-gradient(top, $green, $dark-green);
   padding: rhythm(1);
   @include box-shadow;
   @include clearfix;
@@ -264,8 +255,7 @@ header {
       @include adjust-font-size-to($base-font-size);
       width: 100px;
       border: 0 none;
-      @include background(linear-gradient(top, $green, $dark-green));
-      background-color: $green;
+      @include linear-gradient(top, $green, $dark-green);
       float: left;
       cursor: pointer;
     }
@@ -304,17 +294,7 @@ header {
   margin: rhythm(1) auto;
 
   div {
-    background: $green;
-    @include background-image(linear-gradient(
-      -45deg,
-      $green 25%,
-      $light-green 25%,
-      $light-green 50%,
-      $green 50%,
-      $green 75%,
-      $light-green 75%,
-      $light-green 100%
-    ));
+    @include linear-gradient(-45deg, $green 25%, $light-green 25%, $light-green 50%, $green 50%, $green 75%, $light-green 75%, $light-green 100%);
     background-size: rhythm(2) rhythm(2);
     background-repeat: repeat-x;
     height: 100%;

src/sass/reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}