diff --git a/axis/buttons.styl b/axis/buttons.styl
index cc54326..9172cc4 100644
--- a/axis/buttons.styl
+++ b/axis/buttons.styl
@@ -11,21 +11,21 @@
 // ex. highlight()
 // ex. highlight: .7
 
--highlight(strength = .3)
-  box-shadow(s("inset 0 1px 0 %s", rgba(255,255,255,strength)))
+-highlight($strength = .3)
+  box-shadow(s("inset 0 1px 0 %s", rgba(255,255,255,$strength)))
 
 // Function: parse
 // Used internally for setting button sizes.
 
--parse(size)
-  if size == "small"
+-parse($size)
+  if $size == "small"
     return 10
-  else if size == "medium"
+  else if $size == "medium"
     return 13
-  else if size == "large"
+  else if $size == "large"
     return 18
   else
-    return size
+    return $size
 
 // Mixin: Button
 //
@@ -34,7 +34,7 @@
 // - size: Takes 'small', 'medium', 'large', or an integer. The numbers reflect
 //   the font size for the text inside the button, but scales all other aspects
 //   as well (corners, padding, etc).
-// - textColor: Takes any color for the button text, defaults to trying to
+// - $text-color: Takes any color for the button text, defaults to trying to
 //   detect whether the background is dark or light and setting the opposite.
 //
 // ex. button()
@@ -43,39 +43,39 @@
 // ex. button: green large
 // ex. button: #4C82D4 24
 
-button(color = default-color, size = "medium", textColor = null)
+button($color = $default-color, $size = "medium", $text-color = null)
 
   // color detection and changes
-  textColor = (light(color) ? #494949 : #fff) unless textColor
-  parsed_size = -parse(size)
+  $text-color = (light($color) ? #494949 : #fff) unless $text-color
+  $parsed-size = -parse($size)
 
   // now that we've got numbers, let's work some proportions
-  height = round((parsed_size * 1.53px) / 2)
-  width = round(((parsed_size * 1.53px) * 2.2) / 2)
+  $height = round(($parsed-size * 1.53px) / 2)
+  $width = round((($parsed-size * 1.53px) * 2.2) / 2)
 
   // dynamically calculated styles
-  font-size: unit(parsed_size, 'px')
-  padding: unit(height, 'px') unit(width, 'px')
-  border-radius: round(parsed_size / 4.33333px)
-  background-color: color
-  color: textColor
+  font-size: unit($parsed-size, 'px')
+  padding: unit($height, 'px') unit($width, 'px')
+  border-radius: round($parsed-size / 4.33333px)
+  background-color: $color
+  color: $text-color
 
   // constant styles
   cursor: pointer
   font-weight: bold
-  font-family: font-stack
+  font-family: $font-stack
   line-height: 1em
   text-align: center
   text-decoration: none
   display: inline-block
   border none
   &:hover, &:focus
-    background-color: darken(color, 5%)
-    color: darken(textColor, 3%)
+    background-color: darken($color, 5%)
+    color: darken($text-color, 3%)
     border: none
 
   &:active
-    background-color: darken(color, 10%)
+    background-color: darken($color, 10%)
 
 // Mixin: Glossy Button
 //
@@ -84,11 +84,11 @@ button(color = default-color, size = "medium", textColor = null)
 // - size: Takes 'small', 'medium', 'large', or an integer. The numbers reflects
 //   the font size for the text inside the button, but scales all other aspects
 //   as well.
-// - textColor: Takes any color for the button text, defaults to trying to
+// - $text-color: Takes any color for the button text, defaults to trying to
 //   detect whether the background is dark or light and setting the opposite.
-// - shadowColor: Color for the text shadow, default is the contrast detection
+// - $shadow-color: Color for the text shadow, default is the contrast detection
 //   described above.
-// - hoverColor: Color of the text shadow when hovered. Default is contrast
+// - $hover-color: Color of the text shadow when hovered. Default is contrast
 //   detection as described above. You probably don't need to use this.
 //
 // ex. glossy-button()
@@ -97,54 +97,54 @@ button(color = default-color, size = "medium", textColor = null)
 // ex. glossy-button: green large
 // ex. glossy-button: #4C82D4 24
 
-glossy-button(color = default-color, size = "medium", textColor = null, shadowColor = null, hoverColor = null)
+glossy-button($color = $default-color, $size = "medium", $text-color = null, $shadow-color = null, $hover-color = null)
 
   // color detection and changes
-  if textColor
-    darkText = light(textColor) ? true : false
+  if $text-color
+    $dark-text = light($text-color) ? true : false
   else
-    darkText = light(color) ? false : true
-    textColor = darkText ? white : #494949
+    $dark-text = light($color) ? false : true
+    $text-color = $dark-text ? white : #494949
 
-  shadowColor = darkText ? rgba(#000,.1) : rgba(#fff,.3) unless shadowColor
-  hoverColor = darkText ? rgba(#000,.2) : rgba(#fff,.5) unless hoverColor
-  downShadow = darkText ? 0 -1px 1px rgba(#000,.2) : 1px 1px 1px rgba(#fff,.6)
+  $shadow-color = $dark-text ? rgba(#000,.1) : rgba(#fff,.3) unless $shadow-color
+  $hover-color = $dark-text ? rgba(#000,.2) : rgba(#fff,.5) unless $hover-color
+  $down-shadow = $dark-text ? 0 -1px 1px rgba(#000,.2) : 1px 1px 1px rgba(#fff,.6)
 
   // parse words, make sure it's a number
-  parsed_size = -parse(size)
+  $parsed-size = -parse($size)
 
   // now that we've got numbers, let's work some proportions
-  height = round((parsed_size*1.53px)/2)
-  width = round(((parsed_size*1.53px)*2.2)/2)
+  $height = round(($parsed-size*1.53px)/2)
+  $width = round((($parsed-size*1.53px)*2.2)/2)
 
   // dynamically calculated styles
-  font-size: unit(parsed_size, 'px')
-  padding: unit(height, 'px') unit(width, 'px')
-  border-radius: round(parsed_size/4.33333px)
-  gradient: color
-  text-shadow: 1px 1px 1px shadowColor
-  border: s('1px solid %s', darken(color, 10%))
-  color: textColor
+  font-size: unit($parsed-size, 'px')
+  padding: unit($height, 'px') unit($width, 'px')
+  border-radius: round($parsed-size/4.33333px)
+  gradient($color)
+  text-shadow: 1px 1px 1px $shadow-color
+  border: s('1px solid %s', darken($color, 10%))
+  color: $text-color
 
   // constant styles
   -highlight()
   cursor: pointer
   font-weight: bold
-  font-family: font-stack
+  font-family: $font-stack
   line-height: 1em
   text-align: center
   text-decoration: none
   display: inline-block
 
   &:hover, &:focus
-    background-position: 0 unit(height * -1, 'px')
-    color: darken(textColor, 3%)
-    text-shadow: 1px 1px 1px hoverColor
+    background-position: 0 unit($height * -1, 'px')
+    color: darken($text-color, 3%)
+    text-shadow: 1px 1px 1px $hover-color
 
   &:active
-    box-shadow(s("inset 0 1px %s %s", parsed_size/2.6px, rgba(darken(color, 25%),.6)))
-    text-shadow: downShadow
-    border-color: darken(color, 18%)
+    box-shadow(s("inset 0 1px %s %s", $parsed-size/2.6px, rgba(darken($color, 25%),.6)))
+    text-shadow: $down-shadow
+    border-color: darken($color, 18%)
 
 // Mixin: Button Disabled
 //
diff --git a/axis/code.styl b/axis/code.styl
index 71c50ec..2f59e6e 100644
--- a/axis/code.styl
+++ b/axis/code.styl
@@ -3,26 +3,26 @@
 // ----
 
 // Mixin: Code
-// 
+//
 // Styles inline code snippets on your page. Defaults to a beautiful red, but
 // can be passed any color.
-// 
+//
 // ex. code: blue
 // ex. code: #7ED45F
 
-code(color = #DF5C33)
+code($color = #DF5C33)
   padding: 3px 4px
-  color: color
+  color: $color
   background-color: #F5F5F5
   border: 1px solid #E1E1E8
   border-radius: 3px
-  font-family: Menlo, Monaco, monospace
+  font-family: Menlo, Monaco, $monospace
 
 // Mixin: Pre
-// 
+//
 // Styles code blocks on your page. Syntax highlighting to be included in the
 // future. Takes no arguments.
-// 
+//
 // ex. pre()
 
 pre()
@@ -33,14 +33,14 @@ pre()
   border-radius: 3px
   white-space: pre-wrap
   word-break: break-all
-  font-family: Menlo, Monaco, monospace
+  font-family: Menlo, Monaco, $monospace
   line-height: 160%
 
 // Additive Mixin: Code Blocks
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Adds roots styles by default to <code> and <pre> tags.
 
 code-blocks()
diff --git a/axis/forms.styl b/axis/forms.styl
index a60e013..0378385 100644
--- a/axis/forms.styl
+++ b/axis/forms.styl
@@ -3,62 +3,62 @@
 // -----
 
 // Function: Focus Glow
-// Makes your inputs glow when focused. Pass a color, they will glow that color. 
+// Makes your inputs glow when focused. Pass a color, they will glow that color.
 
--focus-glow(color = default-color)
+-focus-glow($color = $default-color)
   &:focus
-    box-shadow(0 0 5px rgba(color,.7))
-    border: 1px solid desaturate(color, 35%)
+    box-shadow(0 0 5px rgba($color,.7))
+    border: 1px solid desaturate($color, 35%)
     outline: none
 
 // Mixin: Input
-// 
+//
 // A general purpose mixin for text inputs. Provides an nice attractive default
 // style that's easily customizable. Takes a color as the first param and an
 // optional width as the second.
-// 
+//
 // ex. input()
 // ex. input: purple
 // ex. input: #D45D86 400px
 
-input(color = aqua, width = 250px)
+input($color = $aqua, $width = 250px)
   box-shadow(inset 0 1px 1px rgba(#000, 0.1))
   -webkit-font-smoothing: antialiased
-  font-size: unit(font-size, 'px')
-  font-family: font-stack
+  font-size: unit($font-size, 'px')
+  font-family: $font-stack
   border: solid 1px #bbb
   border-radius: .2em
   outline: none
   padding: .45em
   background: #fff
   color: #555
-  width: width
+  width: $width
   text-shadow: 0 0 1px rgba(#fff, .1)
   transition()
   pie()
   if color
-    -focus-glow(color)
+    -focus-glow($color)
   else
     box-shadow: none
 
 // Mixin: Input Search
-// 
+//
 // A search style input with rounded corners and an optional search icon at the
 // end. Takes any color.
-// 
+//
 // ex. input-search()
 // ex. input-search: yellow
 
-input-search(color = aqua, width = 250px)
-  input: color width
+input-search($color = aqua, $width = 250px)
+  input: $color $width
   padding-left: 9px
   rounded()
 
 // Mixin: Input Disabled
-// 
+//
 // Makes your input appear to be disabled. Note that you also need to add
 // 'disabled' to your html tag in order for it to actually be disabled.
-// 
+//
 // ex. input-disabled()
 
 input-disabled()
@@ -70,127 +70,127 @@ input-disabled()
     box-shadow: inset 0 1px 1px rgba(#000, 0.1)
 
 // Mixin: Label
-// 
+//
 // Very basic label for your form. Pass it an optional display type to have it
 // inline or block.
-// 
+//
 // ex. label()
 // ex. label: 'block'
 
-label(display = 'inline-block')
+label($display = 'inline-block')
   line-height: 1.5em
-  display: unquote(display)
+  display: unquote($display)
 
 // Mixin: Field
-// 
+//
 // Often times it's easier to wrap your input and label in a div called "field"
 // so they can be floated, position, and manipulated without screwing up the
 // rest of the form. That's what this mixin is for - put it on a div that
 // contains a label and an input. Then feed it a direction to align (default is
 // right), and an optional width.
-// 
+//
 // ex. field()
 // ex. field: left
 // ex. field: right 500px
 
-field(direction = right, width = 370px)
+field($direction = right, $width = 370px)
   clear: both
   margin-bottom: 5px
-  text-align: direction
-  width: width
+  text-align: $direction
+  width: $width
 
 // Mixin: Input Error
-// 
+//
 // When someone F'd it up, you gotta show them how it is. Put this on an input
 // to make it clear that something bad is happening. Best implemented in an
 // .error class or something similar.
-// 
+//
 // ex. input-error()
 // ex. input-error: blue
 
-input-error(color = red)
-  color: color
-  border-color: color
-  -focus-glow(color)
+input-error($color = $red)
+  color: $color
+  border-color: $color
+  -focus-glow($color)
 
 // Mixin: Field Error
-// 
+//
 // If you are wrapping labels and inputs in a field div, this makes life even
 // easier. Makes the label text as well as the input field red.
-// 
+//
 // ex. field-error()
 // ex. field-error: blue
 
-field-error(color = red)
-  color: color
-  
+field-error($color = $red)
+  color: $color
+
   input
-    input-error: color
+    input-error: $color
 
 // Mixin: Input Warning
-// 
+//
 // Ok, so maybe you didn't totally F it up, but at very least you deserve a
 // warning. Best implemented in a .warning class or something similar.
-// 
+//
 // ex. input-warning()
 // ex. input-warning: blue
 
-input-warning(color = yellow)
-  color: darken(color, 15%)
-  border-color: color
-  -focus-glow(color)
+input-warning($color = $yellow)
+  color: darken($color, 15%)
+  border-color: $color
+  -focus-glow($color)
 
 // Mixin: Field Warning
-// 
+//
 // If you are wrapping labels and inputs in a field div, this makes life even
 // easier. Makes the label text as well as the input field yellow.
-// 
+//
 // ex. field-warning()
 // ex. field-warning: blue
 
-field-warning(color = yellow)
-  color: darken(color, 15%)
-  
+field-warning($color = $yellow)
+  color: darken($color, 15%)
+
   input
-    input-warning: color
+    input-warning: $color
 
 // Mixin: Input Success
-// 
+//
 // http://cl.ly/F4Em/great-success.jpeg - Best implemented in a .success class
 // or something similar.
-// 
+//
 // ex. input-success()
 // ex. input-success: red
 
-input-success(color = green)
-  color: color
-  border-color: color
-  -focus-glow(color)
+input-success($color = $green)
+  color: $color
+  border-color: $color
+  -focus-glow($color)
 
 // Mixin: Field Success
-// 
+//
 // You're probably getting tired of this routine at this point. I'm sure you can
 // imagine what this does.
-// 
+//
 // ex. field-success()
 // ex. field-success: blue
 
-field-success(color = green)
-  color: color
+field-success($color = $green)
+  color: $color
   input
-    input-success: color
+    input-success: $color
 
 // Additive Mixin: Fields
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Add the field styles to .field as well as success, warning, and failure
 // states. Also takes direction and width. Highly recommended mixin.
 
-fields(direction = right, width = 370px)
+fields($direction = right, $width = 370px)
   .field
-    field(direction, width)
+    field($direction, $width)
 
     &.success
       field-success()
@@ -200,10 +200,10 @@ fields(direction = right, width = 370px)
       field-error()
 
 // Additive Mixin: Forms
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Adds nicer looking styles to all text inputs and textareas. Overrides the
 // defaults.
 
@@ -221,10 +221,10 @@ forms()
       input-error()
 
 // Block Mixin: Html 5 Inputs
-// 
-// A block that selects all the html5 input types and lets you style them as 
+//
+// A block that selects all the html5 input types and lets you style them as
 // you wish without having to type out the whole list.
-// 
+//
 // ex. +html5-inputs()
 //       border: red
 
diff --git a/axis/gradients.styl b/axis/gradients.styl
index 5317477..80949f5 100644
--- a/axis/gradients.styl
+++ b/axis/gradients.styl
@@ -3,49 +3,49 @@
 // ---------
 
 // Mixin: Gradient
-// 
+//
 // Takes one color and outputs a vertical gradient between the offset by 10% in
 // either direction, offset precentage customizable via `strength` param. Or
 // takes two colors and outputs a vertical gradient that fades between the two
 // colors.
-// 
+//
 // ex. gradient: red blue
 // ex. gradient: red
 
-gradient(color1, color2 = null, strength = 10%)
+gradient($color1, $color2 = null, $strength = 10%)
   // shift args if one color mode
-  if (typeof(color2) is 'unit')
-    strength = color2
-    color2 = null
+  if (typeof($color2) is 'unit')
+    $strength = $color2
+    $color2 = null
 
-  start = color2 ? color1 : lighten(color1, strength)
-  end = color2 ? color2 : darken(color1, strength)
-  background: start
-  background: end linear-gradient(top, start, end) repeat-x
-  if pie-enabled
-    -pie-background: unquote('linear-gradient(top,') start unquote(' 0%, ') end unquote('end 100%)')
+  $start = $color2 ? $color1 : lighten($color1, $strength)
+  $end = $color2 ? $color2 : darken($color1, $strength)
+  background: $start
+  background: $end linear-gradient(top, $start, $end) repeat-x
+  if $pie-enabled
+    -pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
     pie()
 
 // Mixin: Image Gradient
-// 
+//
 // Exactly the same as the gradient mixin, but overlays an image to give it
 // more texture.
-// 
+//
 // ex. image-gradient: red pattern.png
 // ex. image-gradient: red pattern.png 30%
 // ex. image-gradient: red blue pattern.png
 
-image-gradient(color1, color2 = null, imagePath = 'noise.png', strength = 10%)
+image-gradient($color1, $color2 = null, $image-path = 'noise.png', $strength = 10%)
   // shift args if one color mode
-  if (typeof(color2) == 'string')
-    strength = imagePath if (typeof(imagePath) == 'unit')
-    imagePath = color2
-    color2 = null
+  if (typeof($color2) == 'string')
+    $strength = $image-path if (typeof($image-path) == 'unit')
+    $image-path = $color2
+    $color2 = null
 
-  start = color2 ? color1 : lighten(color1, strength)
-  end = color2 ? color2 : darken(color1, strength)
-  background: start
-  background: url(img-path imagePath) repeat, end linear-gradient(top, start, end) repeat-x
-  if pie-enabled
-    -pie-background: unquote('linear-gradient(top,') start unquote(' 0%, ') end unquote('end 100%)')
+  $start = $color2 ? $color1 : lighten($color1, $strength)
+  $end = $color2 ? $color2 : darken($color1, $strength)
+  background: $start
+  background: url($img-path $image-path) repeat, $end linear-gradient(top, $start, $end) repeat-x
+  if $pie-enabled
+    -pie-background: unquote('linear-gradient(top,') $start unquote(' 0%, ') $end unquote('end 100%)')
     pie()
diff --git a/axis/images.styl b/axis/images.styl
index 6cd9d03..8c90906 100644
--- a/axis/images.styl
+++ b/axis/images.styl
@@ -7,9 +7,9 @@
 // ex. bg: 'test.png'
 // ex. bg: 'other.jpg' center center repeat
 
-bg(path, args...)
-  args = unquote('no-repeat') unless args
-  background: url(img-path path) args
+bg($path, $args...)
+  $args = unquote('no-repeat') unless $args
+  background: url($img-path $path) $args
 
 // Mixin: bg-retina
 //
@@ -19,19 +19,19 @@ bg(path, args...)
 // ex. bg-retina: 'test.png' 200px 100px
 // ex. bg-retina: 'other.jpg' 100px 50px center center repeat
 
-bg-retina(path, width, height, args...)
-  args = unquote('no-repeat') unless args
-  set_size = false
+bg-retina($path, $width, $height, $args...)
+  $args = unquote('no-repeat') unless $args
+  $set_size = false
 
-  for arg in args
-    if arg == 'no-repeat'
-      set_size = true
+  for $arg in $args
+    if $arg == 'no-repeat'
+      $set_size = true
 
-  background: url(img-path path) args
-  background-size: width height
+  background: url($img-path $path) $args
+  background-size: $width $height
 
-  if set_size
-    size: width height
+  if $set_size
+    size: $width $height
 
 // Mixin: Image Replace
 //
@@ -42,15 +42,15 @@ bg-retina(path, width, height, args...)
 //
 // ex. ir('test.jpg', 200 400)
 
-image-replace(path, dimensions...)
-  dimensions = dimensions[0]
+image-replace($path, $dimensions...)
+  $dimensions = $dimensions[0]
   font: 0/0 a
   text-shadow: none
   color: transparent
-  bg: path if path
-  if length(dimensions) > 1
-    width: unit(dimensions[0], 'px')
-    height: unit(dimensions[1], 'px')
+  bg: $path if $path
+  if length($dimensions) > 1
+    width: unit($dimensions[0], 'px')
+    height: unit($dimensions[1], 'px')
   else
     warn("Make sure you also pass the image dimensions. Example: ir('/img/whatever.jpg', 200px 400px)")
 
@@ -62,12 +62,12 @@ ir = image-replace
 // An alternative to url() that stores images in a cache for use in
 // cache-images().
 
-background-images = null
+$background-images = null
 
 cached-image-url()
-  base = ''
-  s = unquote('url("' + base + join('', arguments) + '")')
-  push(background-images, s) unless s in background-images
+  $base = ''
+  $s = unquote('url("' + $base + join('', arguments) + '")')
+  push($background-images, $s) unless $s in $background-images
   url(arguments)
 
 // Mixin: Cache Images
@@ -76,7 +76,7 @@ cached-image-url()
 cache-images()
   body:after
     display: none
-    content: background-images
+    content: $background-images
 
 // Mixin: Sprite
 //
@@ -90,9 +90,9 @@ cache-images()
 //
 // TODO: Try using image-size here if @width or @height aren't defined
 
-sprite(iteration, orientation='vertical')
-  if orientation == 'vertical'
-    background-position: 0 unit(@height*-1*iteration, 'px')
-  else if orientation == 'horizontal'
+sprite($iteration, $orientation = 'vertical')
+  if $orientation == 'vertical'
+    background-position: 0 unit(@height*-1*$iteration, 'px')
+  else if $orientation == 'horizontal'
     // warn(unit(@width*iteration, 'px'))
-    background-position: unit(@width*iteration, 'px') 0
+    background-position: unit(@width*$iteration, 'px') 0
diff --git a/axis/interaction.styl b/axis/interaction.styl
index 352388d..f3e1f0c 100644
--- a/axis/interaction.styl
+++ b/axis/interaction.styl
@@ -13,14 +13,14 @@
 // ex. hover-darken()
 // ex. hover-darken: 30%
 
-hover-darken(percent = 15%, forceUseColor = false)
+hover-darken($percent = 15%, $force-use-color = false)
   &:hover
-    if @background and !forceUseColor
-      background-color: darken(@background, percent)
-    else if @background-color and !forceUseColor
-      background-color: darken(@background-color, percent)
+    if @background and !$force-use-color
+      background-color: darken(@background, $percent)
+    else if @background-color and !$force-use-color
+      background-color: darken(@background-color, $percent)
     else if @color
-      color: darken(@color, percent)
+      color: darken(@color, $percent)
     else
       warn('you need to set a color or background color on your element for this to work')
 
@@ -31,14 +31,14 @@ hover-darken(percent = 15%, forceUseColor = false)
 // ex. hover-lighten()
 // ex. hover-lighten: 30%
 
-hover-lighten(percent = 15%, forceUseColor = false)
+hover-lighten($percent = 15%, $force-use-color = false)
   &:hover
-    if @background and !forceUseColor
-      background-color: lighten(@background, percent)
-    else if @background-color and !forceUseColor
-      background-color: lighten(@background-color, percent)
+    if @background and !$force-use-color
+      background-color: lighten(@background, $percent)
+    else if @background-color and !$force-use-color
+      background-color: lighten(@background-color, $percent)
     else if @color
-      color: lighten(@color, percent)
+      color: lighten(@color, $percent)
     else
       warn('you need to set a color or background color on your element for this to work')
 
@@ -50,11 +50,11 @@ hover-lighten(percent = 15%, forceUseColor = false)
 // ex. hover-underline()
 // ex. hover-underline: 2px 'dotted'
 
-hover-underline(borderSize = 1px, type = 'solid', color = null)
-  border-bottom: borderSize unquote(type) transparent
+hover-underline($border-size = 1px, $type = 'solid', $color = null)
+  border-bottom: $border-size unquote($type) transparent
 
   &:hover
-    border-bottom: borderSize unquote(type) color
+    border-bottom: $border-size unquote($type) $color
 
 // Mixin: Hover Pop
 //
@@ -67,18 +67,18 @@ hover-underline(borderSize = 1px, type = 'solid', color = null)
 // ex. hover-pop: 2.6 90deg
 // ex. hover-pop: 1.2 45deg true
 
-hover-pop(scale = 1.2, rotate = null, shadow = null)
-  if shadow
+hover-pop($scale = 1.2, $rotate = null, $shadow = null)
+  if $shadow
     box-shadow: 0 0 1px transparent
 
   &:hover
     position: relative
     z-index: 10
-    transform: scale(scale)
-    if shadow
+    transform: scale($scale)
+    if $shadow
       box-shadow: 0 0 5px rgba(#000, .3)
-    if rotate
-      transform: scale(scale) rotate(rotate)
+    if $rotate
+      transform: scale($scale) rotate($rotate)
 
 // Mixin: Hover Fade
 //
@@ -88,9 +88,9 @@ hover-pop(scale = 1.2, rotate = null, shadow = null)
 
 // ex. hover-fade: .5
 
-hover-fade(amount = .5)
+hover-fade($amount = .5)
   &:hover
-    opacity: amount
+    opacity: $amount
 
 // Mixin: Hover Color
 //
@@ -100,16 +100,16 @@ hover-fade(amount = .5)
 //
 // ex. hover-color: #D45D86
 
-hover-color(color, forceUseColor = false)
+hover-color($color, $force-use-color = false)
   &:hover
-    if @background and !forceUseColor
-      background-color: color
-    else if @background-color and !forceUseColor
-      background-color: color
+    if @background and !$force-use-color
+      background-color: $color
+    else if @background-color and !$force-use-color
+      background-color: $color
     else if @background-color and !force-use-color
-      background-color: color
+      background-color: $color
     else if @color
-      color: color
+      color: $color
     else
       warn('you need to set a color or background color on your element for this to work')
 
diff --git a/axis/layout.styl b/axis/layout.styl
index bfabbe3..43f07ea 100644
--- a/axis/layout.styl
+++ b/axis/layout.styl
@@ -13,11 +13,11 @@ group = clearfix
 // ex. columns: 5
 // ex. columns(8, 15px, 200px, '1px solid red')
 
-columns(count=3, gap=30px, width=null, rule=null)
-  column-count: count
-  column-gap: gap
-  column-width: width if width
-  column-rule: unquote(rule) if rule
+columns($count = 3, $gap = 30px, $width = null, $rule = null)
+  column-count: $count
+  column-gap: $gap
+  column-width: $width if $width
+  column-rule: unquote($rule) if $rule
 
 // Mixin: Avoid Column Break
 //
@@ -48,8 +48,8 @@ inline-block()
 //
 // ex. vertically-align() or reset it with vertically-align(false)
 
-vertically-align(reset = null)
-  if reset != false
+vertically-align($reset = null)
+  if $reset != false
     position: relative
     top: 50%
     transform: translateY(-50%)
@@ -77,14 +77,14 @@ vertically-align(reset = null)
 // ex. media: 15px
 // ex. media: 15px 10px
 
-media(margin=10px)
+media($margin = 10px)
 
-  left-margin = margin
-  right-margin = margin
+  $left-margin = $margin
+  $right-margin = $margin
 
-  if length(arguments) > 1
-    left-margin = arguments[0]
-    right-margin = arguments[1]
+  if length($arguments) > 1
+    $left-margin = $arguments[0]
+    $right-margin = $arguments[1]
 
   overflow: hidden
   zoom: 1
@@ -94,16 +94,16 @@ media(margin=10px)
     overflow: hidden
   & > *:first-child
     float: left
-    margin-right: right-margin
+    margin-right: $right-margin
   & > *:nth-child(3)
     float: right
-    margin-left: left-margin
+    margin-left: $left-margin
 
 // Mixin: Ratio Box
 // Set a specific width/height ratio. Useful on background images and iframes.
 
-ratio-box(ratio = 1/1)
-  ratio = remove-unit(ratio)
+ratio-box($ratio = 1/1)
+  $ratio = remove-unit($ratio)
   overflow: hidden
   position: relative
 
@@ -111,7 +111,7 @@ ratio-box(ratio = 1/1)
     content: ''
     display: block
     height: 0
-    padding-top: (1 / ratio) * 100%
+    padding-top: (1 / $ratio) * 100%
 
 // Mixin: Horizontal Rule
 //
@@ -135,9 +135,9 @@ rule($color = rgba(#000, .15), $spacing = 1.5em)
 // ex: tl()
 // ex: tl(auto)
 
-tl(layoutType = fixed)
+tl($layout-type = fixed)
   display: table
-  table-layout: layoutType  // "fixed" or "auto"
+  table-layout: $layout-type  // "fixed" or "auto"
   margin: 0
   padding: 0
   width: 100%
diff --git a/axis/reset.styl b/axis/reset.styl
index 120c9aa..e5a2f23 100644
--- a/axis/reset.styl
+++ b/axis/reset.styl
@@ -4,7 +4,7 @@
 
 // global-reset delegated to nib
 
-support-for-ie ?= true
+$support-for-ie ?= true
 
 // Mixin: Normalize CSS
 // Based on v3.0.1 https://github.com/necolas/normalize.css
@@ -179,7 +179,7 @@ border-box-html()
   *:before,
   *:after
     box-sizing: inherit
-    
+
 // Mixin: Print Styles
 // Nice clean print styles so you don't have to worry about it.
 
@@ -229,7 +229,7 @@ print-styles()
       widows: 3
 
     code
-      font: 12pt Courier, monospace
+      font: 12pt Courier, $monospace
 
     blockquote
       margin: 1.2em
diff --git a/axis/settings.styl b/axis/settings.styl
index 3382ce5..bda17e7 100644
--- a/axis/settings.styl
+++ b/axis/settings.styl
@@ -3,59 +3,79 @@
 // ---------------
 
 // Font stacks (add your own!)
-helvetica-neue = "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif
-helvetica = "Helvetica Neue", Helvetica, Arial, sans-serif
-georgia = Georgia, Cambria, "Times New Roman", Times, serif
-lucidia-grande = "Lucida Grande", Tahoma, Verdana, Arial, sans-serif
-monospace = unquote("'Bitstream Vera Sans Mono', Consolas, Courier, monospace")
-verdana = Verdana, Geneva, sans-serif
+$helvetica-neue = "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif
+$helvetica = "Helvetica Neue", Helvetica, Arial, sans-serif
+$georgia = Georgia, Cambria, "Times New Roman", Times, serif
+$lucidia-grande = "Lucida Grande", Tahoma, Verdana, Arial, sans-serif
+$monospace = unquote("'Bitstream Vera Sans Mono', Consolas, Courier, monospace")
+$verdana = Verdana, Geneva, sans-serif
 
 // Default font settings
-font-stack = helvetica-neue
-font-size = 16
-font-color = #555
+$font-stack = $helvetica-neue
+$font-size = 16
+$font-color = #555
 
 // Colors (via http://clrs.cc - slightly modded)
-navy = #001F3F
-blue = #0074D9
-aqua = #7FDBFF
-teal = #39CCCC
-olive = #3D9970
-green = #2ECC40
-lime = #01FF70
-yellow = #FFDC00
-orange = #FF851B
-red = #D13F19
-maroon = #85144B
-fuchsia = #F012BE
-purple = #B10DC9
-white = #FFFFFF
-silver = #DDDDDD
-gray = #AAAAAA
-black = #222222
+$navy     = #001F3F
+$blue     = #0074D9
+$aqua     = #7FDBFF
+$teal     = #39CCCC
+$olive    = #3D9970
+$green    = #2ECC40
+$lime     = #01FF70
+$yellow   = #FFDC00
+$orange   = #FF851B
+$red      = #D13F19
+$maroon   = #85144B
+$fuchsia  = #F012BE
+$purple   = #B10DC9
+$white    = #FFFFFF
+$silver   = #DDDDDD
+$gray     = #AAAAAA
+$black    = #222222
+
+//Use as default HTML colors
+navy = $navy
+blue = $blue
+aqua = $aqua
+teal = $teal
+olive = $olive
+green = $green
+lime = $lime
+yellow = $yellow
+orange = $orange
+red = $red
+maroon = $maroon
+fuchsia = $fuchsia
+purple = $purple
+white = $white
+silver = $silver
+gray = $gray
+black = $black
 
 // Default color
-default-color = blue
+$default-color = $blue
 
 // Text highlight color
-highlight-color = blue
+$highlight-color = $blue
 
 // Custom image base path for roots mixins
-img-path = ''
+$img-path = ''
 
 // Support for old IE
-support-for-ie = false
+support-for-ie = $support-for-ie  // Needed until we port/drop nib
+$support-for-ie = false
 
 // Ligatures
-ligatures = false
+$ligatures = false
 
 // Vertical rhythm
-base-line-height = 24px
-default-rhythm-border-style = solid
-relative-font-sizing = true
-round-to-nearest-half-line = false
-min-line-padding = 2px
+$base-line-height = 24px
+$default-rhythm-border-style = solid
+$relative-font-sizing = true
+$round-to-nearest-half-line = false
+$min-line-padding = 2px
 
 // Progressive IE (http://css3pie.com/)
-pie-enabled = false
-pie-path = '/pie.htc'
+$pie-enabled = false
+$pie-path = '/pie.htc'
diff --git a/axis/tables.styl b/axis/tables.styl
index bdee894..8c01668 100644
--- a/axis/tables.styl
+++ b/axis/tables.styl
@@ -3,17 +3,16 @@
 // ------
 
 // Mixin: Table
-// 
+//
 // Ported directly from Twitter Bootstrap, as they did an excellent job with
 // the tables. Take three fairly self-explanitory arguments, all boolean. 1st
 // makes the table bordered, 2nd adds zebra striping, and the 3rd indiated
 // whether the table is condensed or not.
-// 
+//
 // ex. table()
 // ex. table(striped: true)
 
-table(border = true, striped = true, condensed = false)
-
+table($border = true, $striped = true, $condensed = false)
   max-width: 100%
   border-collapse: collapse
   border-spacing: 0
@@ -40,16 +39,16 @@ table(border = true, striped = true, condensed = false)
   tbody + tbody
     border-top: 2px solid #ddd
 
-  if condensed
+  if $condensed
     th, td
       padding: 4px 5px
 
-  if border
+  if $border
     border: 1px solid #ddd
     border-collapse: separate
     *border-collapse: collapsed
     border-radius: 4px
-    
+
     th + th, td + td, th + td, td + th
       border-left: 1px solid #ddd
 
@@ -74,7 +73,7 @@ table(border = true, striped = true, condensed = false)
     tbody:last-child tr:last-child td:last-child
       border-radius: 0 0 4px 0
 
-  if striped
+  if $striped
     tbody tr:nth-child(odd) td
     tbody tr:nth-child(odd) th
       background-color: #f9f9f9
@@ -84,10 +83,10 @@ table(border = true, striped = true, condensed = false)
       background-color: #f5f5f5
 
 // Additive Mixin: Tables
-// 
+//
 // WARNING: Creates classes in your css and styles them - not to be used inside
 // an element.
-// 
+//
 // Makes tables look awesome by default. Highly recommended if you have tables
 // on your site at all.
 
diff --git a/axis/typography.styl b/axis/typography.styl
index 7b264dc..d3839ed 100644
--- a/axis/typography.styl
+++ b/axis/typography.styl
@@ -40,12 +40,12 @@ raquo()
 //
 // ex. font-face(proxima-nova, '/fonts')
 
-font-face(name, folder, weight='normal', style='normal')
+font-face($name, $folder, $weight = 'normal', $style = 'normal')
   @font-face
-    font-family: name
-    src: url(folder unquote('/') name unquote('.eot') '?#iefix') format('embedded-opentype'), url(folder unquote('/') name unquote('.woff')) format('woff'), url(folder unquote('/') name unquote('.ttf')) format('truetype'), url(folder unquote('/') name unquote('.eot') unquote('#') name) format('svg');
-    font-weight: unquote(weight)
-    font-style: unquote(style)
+    font-family: $name
+    src: url($folder unquote('/') $name unquote('.eot') '?#iefix') format('embedded-opentype'), url($folder unquote('/') $name unquote('.woff')) format('woff'), url($folder unquote('/') $name unquote('.ttf')) format('truetype'), url($folder unquote('/') $name unquote('.eot') unquote('#') $name) format('svg');
+    font-weight: unquote($weight)
+    font-style: unquote($style)
 
 // Function: Line Height
 //
@@ -68,11 +68,11 @@ font-face(name, folder, weight='normal', style='normal')
 //       font-size: 18px
 //       text-margin()
 
-text-margin(size=font-size)
+text-margin($size = $font-size)
   if @font-size
     margin: .75em 0
   else
-    margin: unit(font-size*.75, 'px') 0
+    margin: unit($font-size*.75, 'px') 0
 
 // Mixin: Paragraph
 //
@@ -83,11 +83,11 @@ text-margin(size=font-size)
 // ex. p: 18px
 // ex. p: 14px false
 
-p(size=1rem, margins = true)
-  font-size: size
-  text-margin() if margins
+p($size = 1rem, $margins = true)
+  font-size: $size
+  text-margin() if $margins
   -line-height()
-  openTypeLigatures() if ligatures
+  open-type-ligatures() if $ligatures
 
 // Alias: paragraph
 paragraph = p
@@ -97,12 +97,12 @@ paragraph = p
 // ex. fs: 16px
 // ex. fs: 1.2rem
 
-fs(size)
-  if (unit(size) == 'rem')
-    font-size: round(unit((font-size*size), 'px'))
-    font-size: size
+fs($size)
+  if (unit($size) == 'rem')
+    font-size: round(unit(($font-size*$size), 'px'))
+    font-size: $size
   else
-    font-size: size
+    font-size: $size
 
 // Alias: Uppercase
 // An alias for 'text-transform: uppercase'
@@ -145,14 +145,14 @@ small()
 // Function: Heading
 // For internal use within headings
 
--heading(multiplier)
-  font-size: unit((font-size*multiplier), 'px')
-  font-size: unit(multiplier, 'rem')
+-heading($multiplier)
+  font-size: unit(($font-size*$multiplier), 'px')
+  font-size: unit($multiplier, 'rem')
   text-rendering: optimizelegibility
   font-weight: bold
   text-margin()
   -line-height()
-  openTypeLigatures() if ligatures
+  openTypeLigatures() if $ligatures
 
 // Mixin Set: h1, h2, h3, h4, h5, h6
 //
@@ -164,23 +164,23 @@ small()
 // ex. h3()
 // ex. h3: 3.5
 
-h1(size=2.4)
-  -heading(size)
+h1($size=2.4)
+  -heading($size)
 
-h2(size=1.8)
-  -heading(size)
+h2($size=1.8)
+  -heading($size)
 
-h3(size=1.5)
-  -heading(size)
+h3($size=1.5)
+  -heading($size)
 
-h4(size=1.3)
-  -heading(size)
+h4($size=1.3)
+  -heading($size)
 
-h5(size=1.0)
-  -heading(size)
+h5($size=1.0)
+  -heading($size)
 
-h6(size=0.9)
-  -heading(size)
+h6($size=0.9)
+  -heading($size)
   upcase()
 
 // Mixin: Link
@@ -193,12 +193,12 @@ h6(size=0.9)
 // ex. link: green
 // ex. link: #57777E 'glow'
 
-link(color=blue, style='underline')
-  color: color
+link($color = $blue, $style = 'underline')
+  color: $color
   text-decoration: none
   transition()
 
-  if style == 'underline'
+  if $style == 'underline'
     hover-underline()
     &:hover
       color: darken(@color, 15%)
@@ -209,7 +209,7 @@ link(color=blue, style='underline')
     hover-lighten()
   else if style == 'glow'
     &:hover
-      text-shadow: 0 0 7px rgba(color, .6)
+      text-shadow: 0 0 7px rgba($color, .6)
 
   &:visited
     opacity: .8
@@ -243,16 +243,17 @@ reset-link()
 
 // ex. text-selection()
 
-text-selection(color=highlight-color, textColor=null)
-  textColor = (light(color) ? white : #494949) unless textColor
+text-selection($color = $highlight-color, $text-color = null)
+
+  $text-color = (light($color) ? white : #494949) unless $text-color
 
   &::-moz-selection
-    background: color
-    color: textColor
+    background: $color
+    color: $text-color
 
   &::selection
-    background: color
-    color: textColor
+    background: $color
+    color: $text-color
 
 // Mixin: Ul
 //
@@ -263,13 +264,13 @@ text-selection(color=highlight-color, textColor=null)
 // ex. ul()
 // ex. ul: 'square'
 
-ul(style='disc')
+ul($style = 'disc')
   margin: 5px 15px
   margin: 0.32rem 0.94rem
   padding-left: 1rem
 
   li
-    list-style-type: unquote(style)
+    list-style-type: unquote($style)
     padding: 2px 0
     padding: 0.125rem
 
@@ -282,13 +283,13 @@ ul(style='disc')
 // ex. ol()
 // ex. ol: 'upper-roman'
 
-ol(style='decimal')
+ol($style = 'decimal')
   margin: 5px 18px
   margin: 0.32rem 1.125rem
   padding-left: 1rem
 
   li
-    list-style-type: unquote(style)
+    list-style-type: unquote($style)
     padding: 2px 0
     padding: 0.125rem
 
@@ -300,14 +301,14 @@ ol(style='decimal')
 // ex. inline-list()
 // ex. inline-list: 15px
 
-inline-list(spacing=20px)
+inline-list($spacing = 20px)
   group()
   margin: 0
   padding: 0
 
   li
     float: left
-    margin-right: spacing
+    margin-right: $spacing
     list-style-type: none
 
   li:last-child
@@ -339,8 +340,8 @@ reset-list()
 //
 // ex. blockquote()
 
-blockquote(color=blue)
-  border-left: 4px solid color
+blockquote($color = $blue)
+  border-left: 4px solid $color
   margin: 1em 0
   padding-left: 1.5em
   group()
@@ -392,14 +393,14 @@ hyphenation()
 //
 // ex. base()
 
-base(fonts=font-stack, size=font-size, color=font-color)
+base($fonts = $font-stack, $size = $font-size, $color = $font-color)
   html
-    font-size: unit(size, 'px')
-    font-size: unit((size/16)*100, "%")
+    font-size: unit($size, 'px')
+    font-size: unit(($size/16)*100, "%")
 
   body
-    font-family: fonts
-    color: color
+    font-family: $fonts
+    color: $color
     -webkit-font-smoothing: antialiased
     -webkit-text-size-adjust: 100%
     -ms-text-size-adjust: 100%
diff --git a/axis/ui.styl b/axis/ui.styl
index caaadce..8b7e6c6 100644
--- a/axis/ui.styl
+++ b/axis/ui.styl
@@ -11,9 +11,9 @@
 // ex. area()
 // ex. area: red // <-- not recommended
 
-area(color=#F5F5F5)
+area($color = #F5F5F5)
   box-shadow(inset 0 0 6px rgba(#000,.05))
-  background-color: color
+  background-color: $color
   padding: 15px
   border-radius: 4px
   margin: 20px 0
@@ -28,15 +28,15 @@ area(color=#F5F5F5)
 // ex. notice()
 // ex. notice: 500px blue
 
-notice(width=false, color=#EEEEEE, padding=10px)
+notice($width = false, $color = #EEEEEE, $padding = 10px) // $color variable breaks nib
   group()
-  gradient: color 3%
+  gradient($color, 3%)
   border-radius: 5px
-  padding: padding
-  border: 1px solid darken(color, 10%)
+  padding: $padding
+  border: 1px solid darken($color, 10%)
   box-shadow: 1px 1px 3px rgba(#000,.05)
   position: relative
-  width: width if width
+  width: $width if $width
 
 // Mixin: Flash
 //
@@ -48,23 +48,23 @@ notice(width=false, color=#EEEEEE, padding=10px)
 // ex. flash()
 // ex. flash: 'error'
 
-flash(type='notice')
-  if type == 'notice'
-    notice(color: #6CC5FA)
+flash($type = 'notice')
+  if $type == 'notice'
+    notice($color: #6CC5FA)
     color: #fff
     font-weight: bold
     text-shadow: 1px 1px 1px rgba(#000,.2)
-  if type == 'success'
-    notice(color: #7BDEA3)
+  if $type == 'success'
+    notice($color: #7BDEA3)
     color: #fff
     font-weight: bold
     text-shadow: 1px 1px 1px rgba(#000,.2)
-  if type == 'warning'
-    notice(color: #FAE677)
+  if $type == 'warning'
+    notice($color: #FAE677)
     font-weight: bold
     text-shadow: 1px 1px 1px rgba(#fff,.2)
-  if type == 'error'
-    notice(color: #E77C70)
+  if $type == 'error'
+    notice($color: #E77C70)
     color: #fff
     font-weight: bold
     text-shadow: 1px 1px 1px rgba(#000,.2)
@@ -81,13 +81,13 @@ flash(type='notice')
 // ex. breadcrumb: "-" 25px red
 // ex. breadcrumb "~" 40px
 
-breadcrumb(character="/", spacing=10px, dividerColor=#CDCDCD)
-  inline-list: spacing
+breadcrumb($character = "/", $spacing = 10px, $divider-color = #CDCDCD)
+  inline-list: $spacing
 
   li:after
-    content: character
-    margin-left: spacing
-    color: dividerColor
+    content: $character
+    margin-left: $spacing
+    color: $divider-color
 
   li:last-child:after
     content: ""
@@ -104,90 +104,91 @@ breadcrumb(character="/", spacing=10px, dividerColor=#CDCDCD)
 // ex. bubble: bottom right #5740A1 500px
 // ex. bubble: right top #5740A1 500px
 
-bubble(pos0=left, pos1=false, color=#EEEEEE, width=false, triangleSize=10px, sideDistance=15px, padding=10px, pointer=false, triangleColor=darken(color, 3%), triangleBorderColor=darken(triangleColor, 10%))
-
-  // use named argument 'pointer' as pos0 arg (to preserve old bubble api)
-  borderWidth = 1px
-  sqrt2 = 1.3
-  distanceYShadow = (sideDistance - borderWidth)
-  distanceXShadow = (sideDistance - borderWidth)
-  marginLeftShadow = auto
-  marginLeft= auto
-  marginTopShadow = auto
-  marginTop = auto
+bubble($pos0 = left, $pos1 = false, $color = #EEEEEE, $width = false, $triangle-size = 10px, $side-distance = 15px, $padding = 10px, pointer = false, $triangle-color = darken($color, 3%), $triangle-border-color = darken($triangle-color, 10%))
+
+  // use named argument 'pointer' as $pos0 arg (to preserve old bubble api)
+  $border-width = 1px
+  $sqrt2 = 1.3
+  $distance-y-shadow = ($side-distance - $border-width)
+  $distance-x-shadow = ($side-distance - $border-width)
+  $margin-left-shadow = auto
+  $margin-left = auto
+  $margin-top-shadow = auto
+  $margin-top = auto
   if pointer
-    pos1 = pointer
-    pos0 = bottom
-  // if no pos1 is given, shift args and assume 'bottom pos0'
-  if pos1 is false
-    pos1 = pos0
-    pos0 = bottom
-  else if pos1 is a 'color'
-    width = color
-    color = pos1
-    pos1 = pos0
-    pos0 = bottom
-
-  notice: width color padding
-
-  if pos0 is top
-    directionTriangle = up
-    positionY = top
-    distanceY = -(triangleSize)
-    distanceYShadow = -(triangleSize + borderWidth * sqrt2)
-  else if pos0 is bottom
-    directionTriangle = down
-    positionY = bottom
-    distanceY = -(triangleSize)
-    distanceYShadow = -(triangleSize + borderWidth * sqrt2)
-  else if pos0 is left
-    directionTriangle = left
-    positionX = left
-    distanceX = -(triangleSize)
-    distanceXShadow = -(triangleSize + borderWidth * sqrt2)
-  else if pos0 right
-    directionTriangle = right
-    positionX = right
-    distanceX = -(triangleSize)
-    distanceXShadow = -(triangleSize + borderWidth * sqrt2)
-
-  if pos1 is left
-    positionX = left
-    distanceX = sideDistance
-  else if pos1 is right
-    positionX = right
-    distanceX = sideDistance
-  else if pos1 is bottom
-    positionY = bottom
-    distanceY = sideDistance
-  else if pos1 is top
-    positionY = top
-    distanceY = sideDistance
-  else if pos1 is center
-    if pos0 is top or pos0 is bottom or pos1 is false
-      marginLeft = -(triangleSize)
-      marginLeftShadow = -(triangleSize + borderWidth * sqrt2 / 2)
-      positionX = left
-      distanceX = 50%
-      distanceXShadow = 50%
+    $pos1 = pointer
+    $pos0 = bottom
+  // if no $pos1 is given, shift args and assume 'bottom $pos0'
+  if $pos1 is false
+    $pos1 = $pos0
+    $pos0 = bottom
+  else if $pos1 is a 'color'
+    $width = $color
+    $color = $pos1
+    $pos1 = $pos0
+    $pos0 = bottom
+
+  notice: $width $color $padding
+
+  if $pos0 is top
+    $direction-triangle = up
+    $position-y = top
+    $distance-y = -($triangle-size)
+    $distance-y-shadow = -($triangle-size + $border-width * $sqrt2)
+  else if $pos0 is bottom
+    $direction-triangle = down
+    $position-y = bottom
+    $distance-y = -($triangle-size)
+    $distance-y-shadow = -($triangle-size + $border-width * $sqrt2)
+  else if $pos0 is left
+    $direction-triangle = left
+    $position-x = left
+    $distance-x = -($triangle-size)
+    $distance-x-shadow = -($triangle-size + $border-width * $sqrt2)
+  else if $pos0 right
+    $direction-triangle = right
+    $position-x = right
+    $distance-x = -($triangle-size)
+    $distance-x-shadow = -($triangle-size + $border-width * $sqrt2)
+
+  if $pos1 is left
+    $position-x = left
+    $distance-x = $side-distance
+  else if $pos1 is right
+    $position-x = right
+    $distance-x = $side-distance
+  else if $pos1 is bottom
+    $position-y = bottom
+    $distance-y = $side-distance
+  else if $pos1 is top
+    $position-y = top
+    $distance-y = $side-distance
+  else if $pos1 is center
+    if $pos0 is top or $pos0 is bottom or $pos1 is false
+      $margin-left = -($triangle-size)
+      $margin-left-shadow = -($triangle-size + $border-width * $sqrt2 / 2)
+      $position-x = left
+      $distance-x = 50%
+      $distance-x-shadow = 50%
     else
-      marginTop = -(triangleSize/2)
-      marginTopShadow = -(triangleSize/2 + borderWidth * sqrt2 / 2)
-      positionY = top
-      distanceY = 50%
-      distanceYShadow = 50%
+      $margin-top = -($triangle-size/2)
+      $margin-top-shadow = -($triangle-size/2 + $border-width * $sqrt2 / 2)
+      $position-y = top
+      $distance-y = 50%
+      $distance-y-shadow = 50%
 
   &:before
-    margin-top: marginTopShadow
-    margin-left: marginLeftShadow
-    triangle: directionTriangle (triangleSize + borderWidth * sqrt2) triangleBorderColor
-    absolute: positionY distanceYShadow positionX distanceXShadow
+    margin-top: $margin-top-shadow
+    margin-left: $margin-left-shadow
+    triangle: $direction-triangle ($triangle-size + $border-width * $sqrt2) $triangle-border-color
+    absolute: $position-y $distance-y-shadow $position-x $distance-x-shadow
     display: block
+
   &:after
-    margin-top: marginTop
-    margin-left: marginLeft
-    triangle: directionTriangle triangleSize triangleColor
-    absolute: positionY distanceY positionX distanceX
+    margin-top: $margin-top
+    margin-left: $margin-left
+    triangle: $direction-triangle $triangle-size $triangle-color
+    absolute: $position-y $distance-y $position-x $distance-x
     display: block
 
 // Mixin: Figure
@@ -201,12 +202,12 @@ bubble(pos0=left, pos1=false, color=#EEEEEE, width=false, triangleSize=10px, sid
 // ex. figure: blue
 // ex. figure(green, 100px 400px)
 
-figure(color = default-color, dimensions = false)
+figure($color = $default-color, $dimensions = false)
 
-  if length(dimensions) > 1
+  if length($dimensions) > 1
     display: block
-    size: dimensions[0] dimensions[1]
-  else if dimensions == false
+    size: $dimensions[0] $dimensions[1]
+  else if $dimensions == false
     inline-block()
   else
     warn("Make sure you pass the image's dimensions as a space-separated list")
@@ -215,7 +216,7 @@ figure(color = default-color, dimensions = false)
     display: block
     padding: 4px
     border-radius: 3px
-    border: 1px solid rgba(color, .6)
+    border: 1px solid rgba($color, .6)
 
   figcaption
     padding: 10px 0
@@ -233,35 +234,35 @@ figure(color = default-color, dimensions = false)
 // ex. nav()
 // ex. nav: 1 #444 red true
 
-navigation(size = 1, bgColor = #222, linkColor = #fff, posFixed = false)
+navigation($size = 1, $bg-color = #222, $link-color = #fff, $pos-fixed = false)
   group()
   display: block
   z-index: 10
-  gradient: bgColor 5%
+  gradient: $bg-color 5%
   box-shadow: 0 3px 3px rgba(0,0,0,.15)
-  border-bottom: 1px solid rgba(darken(bgColor, 15%),.7)
-  height: (size + 14) * 2.866px
+  border-bottom: 1px solid rgba(darken($bg-color, 15%),.7)
+  height: ($size + 14) * 2.866px
   width: 100%
-  font-size: unit(size + 14, 'px')
+  font-size: unit($size + 14, 'px')
 
-  if posFixed
+  if $pos-fixed
     position: fixed
   else
     position: relative
 
   h1
     float: left
-    padding: (size + 14) * .58px
+    padding: ($size + 14) * .58px
     padding-left: 17px
-    color: linkColor
+    color: $link-color
     bold()
-    font-size: (size + 14) * 1.3px
+    font-size: ($size + 14) * 1.3px
 
   ul
     float: right
     margin: 0
-    padding: (size + 14) * .8px
-    color: linkColor
+    padding: ($size + 14) * .8px
+    color: $link-color
 
     li
       list-style-type: none
@@ -269,12 +270,12 @@ navigation(size = 1, bgColor = #222, linkColor = #fff, posFixed = false)
       float: left
 
       a
-        color: linkColor
+        color: $link-color
         border: none
         cursor: pointer
 
         &:hover
-          color: darken(linkColor, 20%)
+          color: darken($link-color, 20%)
           border: none
 
 // Alias: nav
@@ -311,7 +312,7 @@ flash-notices()
 // ex. radio: gray
 // ex. radio(#FF1493)
 
-radio(color=#0074d9)
+radio($color = #0074d9)
   cursor: pointer
   display: block
   line-height: 2.5em
@@ -346,7 +347,7 @@ radio(color=#0074d9)
 
     // Checked
     &:checked + span:before, &:focus + span:before
-      background: color
+      background: $color
       box-shadow: 0 0 0 0.25em rgba(#000, .15)
 
 // Mixin: Range
@@ -358,28 +359,28 @@ radio(color=#0074d9)
 // ex. range()
 // ex. range: tomato 200px 15px 9px #333
 
-range(color=#0074d9, trackWidth=100%, thumbSize=2em, trackHeight=.5em, trackColor=rgba(#000, .1))
+range($color = #0074d9, $track-width = 100%, $thumb-size = 2em, $track-height = .5em, $track-color = rgba(#000, .1))
   -webkit-appearance: none
-  width: trackWidth
+  width: $track-width
   margin: 0
   outline: none
   background: transparent
 
   &::-webkit-slider-runnable-track
-    background: trackColor
+    background: $track-color
     border: none
-    border-radius: trackHeight
-    height: trackHeight
-    width: trackWidth
+    border-radius: $track-height
+    height: $track-height
+    width: $track-width
 
   &::-webkit-slider-thumb
     -webkit-appearance: none
     border: none
-    height: thumbSize
-    width: thumbSize
+    height: $thumb-size
+    width: $thumb-size
     border-radius: 50%
-    background: color
-    margin-top: "calc(-%s / 2 + %s / 2)" % (thumbSize trackHeight)
+    background: $color
+    margin-top: "calc(-%s / 2 + %s / 2)" % ($thumb-size $track-height)
     transition: all 0.2s ease
 
     &:hover
@@ -387,47 +388,47 @@ range(color=#0074d9, trackWidth=100%, thumbSize=2em, trackHeight=.5em, trackColo
       cursor: pointer
 
     &:active
-      background: darken(color, 15%)
+      background: darken($color, 15%)
 
   &:focus
     outline: none
 
   &:focus::-webkit-slider-runnable-track
-    background: trackColor
+    background: $track-color
 
   &::-moz-range-track
-    width: trackWidth
-    height: trackHeight
-    background: trackColor
+    width: $track-width
+    height: $track-height
+    background: $track-color
     border: none
-    border-radius: trackHeight
+    border-radius: $track-height
 
   &::-moz-range-thumb
     border: none
-    height: thumbSize
-    width: thumbSize
+    height: $thumb-size
+    width: $thumb-size
     border-radius: 50%
-    background: color
+    background: $color
     transition: all 0.2s ease
 
     &:hover
       transform: scale(1.2)
 
     &:active
-      background: darken(color, 15%)
+      background: darken($color, 15%)
 
   &::-moz-focus-outer
     border: 0
 
   &::-ms-track
-    height: trackHeight
-    width: trackWidth
+    height: $track-height
+    width: $track-width
     background: transparent
-    border-width: "calc(%s / 2 + %s / 2)" % (thumbSize trackHeight) 0
+    border-width: "calc(%s / 2 + %s / 2)" % ($thumb-size $track-height) 0
     color: transparent;
 
   &::-ms-fill-lower, &::-ms-fill-upper, &:focus::-ms-fill-lower, &:focus::-ms-fill-upper
-    background: trackColor
+    background: $track-color
     border-radius: 10px
 
   &::-ms-thumb
@@ -435,10 +436,10 @@ range(color=#0074d9, trackWidth=100%, thumbSize=2em, trackHeight=.5em, trackColo
     height: 2em
     width: 2em
     border-radius: 50%
-    background: color
+    background: $color
 
     &:active
-      background: darken(color, 15%)
+      background: darken($color, 15%)
 
   &::-ms-tooltip
     display: none
diff --git a/axis/utilities.styl b/axis/utilities.styl
index 7e9851d..9bcdb5b 100644
--- a/axis/utilities.styl
+++ b/axis/utilities.styl
@@ -2,12 +2,13 @@
 // Utilities
 // ---------
 
+
 // Mixin: Pie
 // When turned on, enables css3 pie (http://css3pie.com/) for all
 // elements that can use it. Which makes IE look a lot nicer.
 
 pie()
-  behavior: url(pie-path) if pie-enabled
+  behavior: url($pie-path) if $pie-enabled
 
 // Mixin: Rounded
 //
@@ -42,25 +43,25 @@ b()
 // ex. triangle()
 // ex. triangle: 'down' 15px blue
 
-triangle(direction='up', size=10px, color=#000)
+triangle($direction = 'up', $size = 10px, $color = #000)
   width: 0
   height: 0
-  if direction == 'up'
-    border-left: size solid transparent
-    border-right: size solid transparent
-    border-bottom: size solid color
-  else if direction == 'down'
-    border-left: size solid transparent
-    border-right: size solid transparent
-    border-top: size solid color
-  else if direction == 'left'
-    border-top: size solid transparent
-    border-bottom: size solid transparent
-    border-right: size solid color
-  else if direction == 'right'
-    border-top: size solid transparent
-    border-bottom: size solid transparent
-    border-left: size solid color
+  if $direction == 'up'
+    border-left: $size solid transparent
+    border-right: $size solid transparent
+    border-bottom: $size solid $color
+  else if $direction == 'down'
+    border-left: $size solid transparent
+    border-right: $size solid transparent
+    border-top: $size solid $color
+  else if $direction == 'left'
+    border-top: $size solid transparent
+    border-bottom: $size solid transparent
+    border-right: $size solid $color
+  else if $direction == 'right'
+    border-top: $size solid transparent
+    border-bottom: $size solid transparent
+    border-left: $size solid $color
 
 // Mixin: Debug
 //
@@ -123,37 +124,37 @@ debug()
 // https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_timing-functions.scss
 
 // ease-in
-ease-in-quad =      cubic-bezier(0.550,  0.085, 0.680, 0.530)
-ease-in-cubic =     cubic-bezier(0.550,  0.055, 0.675, 0.190)
-ease-in-quart =     cubic-bezier(0.895,  0.030, 0.685, 0.220)
-ease-in-quint =     cubic-bezier(0.755,  0.050, 0.855, 0.060)
-ease-in-sine =      cubic-bezier(0.470,  0.000, 0.745, 0.715)
-ease-in-expo =      cubic-bezier(0.950,  0.050, 0.795, 0.035)
-ease-in-circ =      cubic-bezier(0.600,  0.040, 0.980, 0.335)
-ease-in-back =      cubic-bezier(0.600, -0.280, 0.735, 0.045)
-ease-in-swift =     cubic-bezier(0.900,  0.000, 0.450, 1.000)
+$ease-in-quad =      cubic-bezier(0.550,  0.085, 0.680, 0.530)
+$ease-in-cubic =     cubic-bezier(0.550,  0.055, 0.675, 0.190)
+$ease-in-quart =     cubic-bezier(0.895,  0.030, 0.685, 0.220)
+$ease-in-quint =     cubic-bezier(0.755,  0.050, 0.855, 0.060)
+$ease-in-sine =      cubic-bezier(0.470,  0.000, 0.745, 0.715)
+$ease-in-expo =      cubic-bezier(0.950,  0.050, 0.795, 0.035)
+$ease-in-circ =      cubic-bezier(0.600,  0.040, 0.980, 0.335)
+$ease-in-back =      cubic-bezier(0.600, -0.280, 0.735, 0.045)
+$ease-in-swift =     cubic-bezier(0.900,  0.000, 0.450, 1.000)
 
 // ease-out
-ease-out-quad =     cubic-bezier(0.250,  0.460, 0.450, 0.940)
-ease-out-cubic =    cubic-bezier(0.215,  0.610, 0.355, 1.000)
-ease-out-quart =    cubic-bezier(0.165,  0.840, 0.440, 1.000)
-ease-out-quint =    cubic-bezier(0.230,  1.000, 0.320, 1.000)
-ease-out-sine =     cubic-bezier(0.390,  0.575, 0.565, 1.000)
-ease-out-expo =     cubic-bezier(0.190,  1.000, 0.220, 1.000)
-ease-out-circ =     cubic-bezier(0.075,  0.820, 0.165, 1.000)
-ease-out-back =     cubic-bezier(0.175,  0.885, 0.320, 1.275)
-ease-out-swift =    cubic-bezier(0.550,  0.000, 0.100, 1.000)
+$ease-out-quad =     cubic-bezier(0.250,  0.460, 0.450, 0.940)
+$ease-out-cubic =    cubic-bezier(0.215,  0.610, 0.355, 1.000)
+$ease-out-quart =    cubic-bezier(0.165,  0.840, 0.440, 1.000)
+$ease-out-quint =    cubic-bezier(0.230,  1.000, 0.320, 1.000)
+$ease-out-sine =     cubic-bezier(0.390,  0.575, 0.565, 1.000)
+$ease-out-expo =     cubic-bezier(0.190,  1.000, 0.220, 1.000)
+$ease-out-circ =     cubic-bezier(0.075,  0.820, 0.165, 1.000)
+$ease-out-back =     cubic-bezier(0.175,  0.885, 0.320, 1.275)
+$ease-out-swift =    cubic-bezier(0.550,  0.000, 0.100, 1.000)
 
 // ease-in-out
-ease-in-out-quad =  cubic-bezier(0.455,  0.030, 0.515, 0.955)
-ease-in-out-cubic = cubic-bezier(0.645,  0.045, 0.355, 1.000)
-ease-in-out-quart = cubic-bezier(0.770,  0.000, 0.175, 1.000)
-ease-in-out-quint = cubic-bezier(0.860,  0.000, 0.070, 1.000)
-ease-in-out-sine =  cubic-bezier(0.445,  0.050, 0.550, 0.950)
-ease-in-out-expo =  cubic-bezier(1.000,  0.000, 0.000, 1.000)
-ease-in-out-circ =  cubic-bezier(0.785,  0.135, 0.150, 0.860)
-ease-in-out-back =  cubic-bezier(0.680, -0.550, 0.265, 1.550)
-ease-in-out-swift = cubic-bezier(0.900,  0.000, 0.100, 1.000)
+$ease-in-out-quad =  cubic-bezier(0.455,  0.030, 0.515, 0.955)
+$ease-in-out-cubic = cubic-bezier(0.645,  0.045, 0.355, 1.000)
+$ease-in-out-quart = cubic-bezier(0.770,  0.000, 0.175, 1.000)
+$ease-in-out-quint = cubic-bezier(0.860,  0.000, 0.070, 1.000)
+$ease-in-out-sine =  cubic-bezier(0.445,  0.050, 0.550, 0.950)
+$ease-in-out-expo =  cubic-bezier(1.000,  0.000, 0.000, 1.000)
+$ease-in-out-circ =  cubic-bezier(0.785,  0.135, 0.150, 0.860)
+$ease-in-out-back =  cubic-bezier(0.680, -0.550, 0.265, 1.550)
+$ease-in-out-swift = cubic-bezier(0.900,  0.000, 0.100, 1.000)
 
 // Function: Rem Calculator
 //
@@ -163,13 +164,13 @@ ease-in-out-swift = cubic-bezier(0.900,  0.000, 0.100, 1.000)
 // ex       : rem(30px) or rem(30)
 // returns  : 1.875rem
 
--rem(value)
-  base-font-size ?= 16px
-  type = unit(value)
-  if type == px
-    return unit(value / base-font-size, 'rem')
+-rem($value)
+  $base-font-size ?= 16px
+  $type = unit($value)
+  if $type == px
+    return unit($value / $base-font-size, 'rem')
   else
-    return unit(value, type)
+    return unit($value, $type)
 
 // Block Mixin: Quantity Queries
 //
@@ -181,22 +182,22 @@ ease-in-out-swift = cubic-bezier(0.900,  0.000, 0.100, 1.000)
 // ex. +quantity-between(0, 8, span)
 // ex. +quantity-exactly(5)
 
-quantity-at-least(count=4, selector=li)
-  & > {selector}:nth-last-child(n+{count})
-  & > {selector}:nth-last-child(n+{count}) ~ {selector}
+quantity-at-least($count = 4, $selector = li)
+  & > {$selector}:nth-last-child(n+{$count})
+  & > {$selector}:nth-last-child(n+{$count}) ~ {$selector}
     {block}
 
-quantity-at-most(count=4, selector=li)
-  & > {selector}:nth-last-child(-n+{count}):first-child
-  & > {selector}:nth-last-child(-n+{count}):first-child ~ {selector}
+quantity-at-most($count = 4, $selector = li)
+  & > {$selector}:nth-last-child(-n+{$count}):first-child
+  & > {$selector}:nth-last-child(-n+{$count}):first-child ~ {$selector}
     {block}
 
-quantity-between(start=0, end=10, selector=li)
-  & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child
-  & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child ~ {selector}
+quantity-between($start = 0, $end = 10, $selector = li)
+  & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child
+  & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child ~ {$selector}
     {block}
 
-quantity-exactly(count=4, selector=li)
-  & > {selector}:nth-last-child({count}):first-child
-  & > {selector}:nth-last-child({count}):first-child ~ {selector}
+quantity-exactly($count = 4, $selector = li)
+  & > {$selector}:nth-last-child({$count}):first-child
+  & > {$selector}:nth-last-child({$count}):first-child ~ {$selector}
     {block}
diff --git a/axis/vendor.styl b/axis/vendor.styl
index 1d19e92..3ca2070 100644
--- a/axis/vendor.styl
+++ b/axis/vendor.styl
@@ -50,14 +50,16 @@ border-radius()
 //
 // ex. opacity: .6
 
-opacity(opacity, args...)
-  
-  if args  
-    filter: s("progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)", opacity * 100 args) if support-for-ie  
+opacity($opacity, $args...)
+
+  $support-for-ie = support-for-ie // address in #192
+
+  if $args
+    filter: s("progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)", $opacity * 100 $args) if $support-for-ie
   else
-    filter: s("progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)", opacity * 100) if support-for-ie  
-    
-  opacity: opacity args
+    filter: s("progid:DXImageTransform.Microsoft.Alpha(Opacity=%s)", $opacity * 100) if $support-for-ie
+
+  opacity: $opacity $args
 
 // Alias: Border Box
 // A quicker way to specify border-box sizing.
@@ -70,11 +72,11 @@ border-box()
 // In case you want to use an unsupported background-position property, this
 // should set you straight!
 
-background-position-x(x)
-  background-position: x 0
+background-position-x($x)
+  background-position: $x 0
 
-background-position-y(y)
-  background-position: 0 y
+background-position-y($y)
+  background-position: 0 $y
 
 // Mixin: Opentype ligatures
 //
@@ -86,7 +88,7 @@ background-position-y(y)
 // Source: http://www.newnet-soft.com/blog/csstypography
 // Additional: http://blog.fontdeck.com/post/15777165734/opentype-1
 
-openTypeLigatures()
+open-type-ligatures()
   -moz-font-feature-settings:    "liga=1, dlig=1"
   -ms-font-feature-settings:     "liga", "dlig"
   -webkit-font-feature-settings: "liga", "dlig"
diff --git a/test/fixtures/reset/print-styles.css b/test/fixtures/reset/print-styles.css
index cf83e1b..da47ebd 100644
--- a/test/fixtures/reset/print-styles.css
+++ b/test/fixtures/reset/print-styles.css
@@ -122,4 +122,4 @@
   tr {
     page-break-inside: avoid;
   }
-}
\ No newline at end of file
+}
diff --git a/test/test.coffee b/test/test.coffee
index 81a2ef2..da02f88 100644
--- a/test/test.coffee
+++ b/test/test.coffee
@@ -211,7 +211,7 @@ describe 'tables', ->
 
   it 'table-styles', (done) ->
     compile_and_match(path.join(@path, 'table.styl'), done)
-
+#
 describe 'typography', ->
 
   before -> @path = path.join(test_path, 'typography')
@@ -264,7 +264,7 @@ describe 'ui', ->
 
   it 'area', (done) ->
     compile_and_match(path.join(@path, 'area.styl'), done)
-
+  #
   it 'breadcrumb', (done) ->
     compile_and_match(path.join(@path, 'breadcrumb.styl'), done)
 
@@ -343,5 +343,3 @@ describe 'additive', ->
 
   it 'framework', (done) ->
     compile_and_match(path.join(@path, 'framework.styl'), done)
-
-# describe 'vertical-rhythm'