use SASS3 syntax

lib/sass/_fancy_buttons.sass

@@ -1,164 +1,163 @@
 @import compass/css3.sass
 @import fancy_gradient.sass
 
-!fb_gradient_style ||= "glossy"
-!fb_invert_on_click ||= 1
-!fb_font_size ||= 18px
-!fb_color ||= #444
-!fb_font_weight ||= "bold"
-!fb_border_width ||= 1px
-!fb_radius ||= 6px
-!fb_light_text ||= #fff
-!fb_dark_text ||= #222
-!fb_gradient ||= 1
-!fb_image_path ||= image_url("button_bg.png")
+$fb_gradient_style: glossy !default
+$fb_invert_on_click: 1 !default
+$fb_font_size: 18px !default
+$fb_color: #444444 !default
+$fb_font_weight: bold !default
+$fb_border_width: 1px !default
+$fb_radius: 6px !default
+$fb_light_text: white !default
+$fb_dark_text: #222222 !default
+$fb_gradient: 1 !default
+$fb_image_path: image_url(unquote("button_bg.png")) !default
 
 // Make a fancy button.
-=fancy-button(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
-  +fancy-button-structure(!font_size, !radius, !border_width)
-  +fancy-button-colors(!color)
+=fancy-button($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
+  +fancy-button-structure($font_size, $radius, $border_width)
+  +fancy-button-colors($color)
 
 // Style the button's colors, picking the most appropriate color set for the base color.
-=fancy-button-colors(!color = !fb_color, !hover = 0, !active = 0)
-  +fb-color(!color, "default")
+=fancy-button-colors($color: $fb_color, $hover: 0, $active: 0)
+  +fb-color($color, "default")
   &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
-    +fb-color(!color, "default")
+    +fb-color($color, "default")
   &:hover, &:focus
-    @if !hover == 0
-      +fb-color(darken(!color, 3), "hover", !color)
+    @if $hover == 0
+      +fb-color(darken($color, 3), "hover", $color)
     @else
-      +fb-color(!hover, "hover")
+      +fb-color($hover, "hover")
   &:active
-    @if !active == 0
-      +fb-color(darken(!color, 6), "active", !color)
+    @if $active == 0
+      +fb-color(darken($color, 6), "active", $color)
     @else
-      +fb-color(!active, "active")
+      +fb-color($active, "active")
 
-=fancy-button-matte(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
-  +fancy-button-structure(!font_size, !radius, !border_width)
-  +fancy-button-colors-matte(!color)
+=fancy-button-matte($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
+  +fancy-button-structure($font_size, $radius, $border_width)
+  +fancy-button-colors-matte($color)
 
-=fancy-button-custom(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
-  +fancy-button-structure(!font_size, !radius, !border_width)
-  +fancy-button-colors-custom(!color, !font_size, !radius, !border_width)
+=fancy-button-custom($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
+  +fancy-button-structure($font_size, $radius, $border_width)
+  +fancy-button-colors-custom($color, $font_size, $radius, $border_width)
 
-=fancy-button-colors-matte(!color = !fb_color, !hover = 0, !active = 0)
-  !fb_current_style = !fb_gradient_style
-  !fb_gradient_style = "matte"
-  +fancy-button-colors(!color, !hover, !active)
-  !fb_gradient_style = !fb_current_style
+=fancy-button-colors-matte($color: $fb_color, $hover: 0, $active: 0)
+  $fb_current_style: $fb_gradient_style
+  $fb_gradient_style: matte
+  +fancy-button-colors($color, $hover, $active)
+  $fb_gradient_style: $fb_current_style
 
-=fancy-button-colors-custom(!color = !fb_color, !hover = 0, !active = 0)
-  !fb_current_style = !fb_gradient_style
-  !fb_gradient_style = "custom"
-  +fancy-button-colors(!color, !hover, !active)
-  !fb_gradient_style = !fb_current_style
+=fancy-button-colors-custom($color: $fb_color, $hover: 0, $active: 0)
+  $fb_current_style: $fb_gradient_style
+  $fb_gradient_style: custom
+  +fancy-button-colors($color, $hover, $active)
+  $fb_gradient_style: $fb_current_style
 
 // Default state color settings
-=fb-color(!color, !state, !lumins = !color)
-  !gradient_top = lighten(!color, 15)
-  !gradient_bottom = darken(!color, 06)
-  !border_color = darken(!color, 08)
-  @if !fb_invert_on_click != 0
-    !border_color = darken(!color, 15)
-  @if saturation(!color) > 0
-    !color = saturate(!color, 40)
-  @else if luminosity(!lumins) >= luminosity(#aaa)
-    !color = lighten(!color, 20)
-  +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color, !state, !lumins)
+=fb-color($color, $state, $lumins: $color)
+  $gradient_top: lighten($color, 15)
+  $gradient_bottom: darken($color, 6)
+  $border_color: darken($color, 8)
+  @if $fb_invert_on_click != 0
+    $border_color: darken($color, 15)
+  @if saturation($color) > 0
+    $color: saturate($color, 40)
+  @else if luminosity($lumins) >= luminosity(#aaaaaa)
+    $color: lighten($color, 20)
+  +fb-state-colors($color, $gradient_top, $gradient_bottom, $border_color, $state, $lumins)
 
 // Apply the button colors specified for the button state into which it is mixed.
-=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border, !state, !lumins = !color)
-  background-color= !color
-  @if !fb_gradient != 0
-    @if !fb_gradient_style == "glossy"
-      @if !fb_invert_on_click != 0 and !state == "active"
-        +invert-fancy-gradient(!gradient_top, !gradient_bottom)
+=fb-state-colors($color, $gradient_top, $gradient_bottom, $border, $state, $lumins: $color)
+  background-color: $color
+  @if $fb_gradient != 0
+    @if $fb_gradient_style == "glossy"
+      @if $fb_invert_on_click != 0 and $state == "active"
+        +invert-fancy-gradient($gradient_top, $gradient_bottom)
       @else
-        +fancy-gradient(!gradient_top, !gradient_bottom)
-    @else if !fb_gradient_style == "matte"
-      @if !fb_invert_on_click and !state == "active"
-        +invert-fancy-matte-gradient(!gradient_top, !gradient_bottom)
+        +fancy-gradient($gradient_top, $gradient_bottom)
+    @else if $fb_gradient_style == "matte"
+      @if $fb_invert_on_click and $state == "active"
+        +invert-fancy-matte-gradient($gradient_top, $gradient_bottom)
       @else
-        +fancy-matte-gradient(!gradient_top, !gradient_bottom)
-    @else if !fb_gradient_style == "custom"
-      @if !fb_invert_on_click and !state == "active"
-        +invert-custom-fancy-gradient(!gradient_top, !gradient_bottom)
+        +fancy-matte-gradient($gradient_top, $gradient_bottom)
+    @else if $fb_gradient_style == "custom"
+      @if $fb_invert_on_click and $state == "active"
+        +invert-custom-fancy-gradient($gradient_top, $gradient_bottom)
       @else
-        +custom-fancy-gradient(!gradient_top, !gradient_bottom)
+        +custom-fancy-gradient($gradient_top, $gradient_bottom)
   border:
-    color= !border
-  !text_shadow_settings = "0px 1px 1px"
-  @if !fb_invert_on_click != 0 and !state == "active"
-    !text_shadow_settings = "0px -1px -1px"
-  @if luminosity(!lumins) < luminosity(#aaa)
-    text-shadow= darken(!color, 25) !text_shadow_settings
-    color= !fb_light_text
+    color: $border
+  $text_shadow_settings: unquote("0px 1px 1px")
+  @if $fb_invert_on_click != 0 and $state == "active"
+    $text_shadow_settings: unquote("0px -1px -1px")
+  @if luminosity($lumins) < luminosity(#aaaaaa)
+    text-shadow: darken($color, 25) $text_shadow_settings
+    color: $fb_light_text
   @else
-    text-shadow= lighten(!color, 15) !text_shadow_settings
-    color= !fb_dark_text
+    text-shadow: lighten($color, 15) $text_shadow_settings
+    color: $fb_dark_text
 
-=fancy-button-text-colors(!color, !hover, !active)
-  color= !color
+=fancy-button-text-colors($color, $hover, $active)
+  color: $color
   &:hover, &:focus
-    color= !hover
+    color: $hover
   &:active
-    color= !active
+    color: $active
   &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
-    color= !color
+    color: $color
 
 // Apply this mixin to a nested element to style an arrow
-=fancy-arrow(!font_size)
-  font-size= !font_size + 4px
-  line-height= !font_size - 4px
-  margin-left= 4px
+=fancy-arrow($font_size)
+  font-size: $font_size + 4px
+  line-height: $font_size - 4px
+  margin-left: 4px
 
 // Layout the button's box
-=fancy-button-structure(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
+=fancy-button-structure($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
   +fb-reset
-  +fancy-button-size(!font_size, !radius, !border_width, !line_height)
+  +fancy-button-size($font_size, $radius, $border_width, $line_height)
 
-=fancy-button-size(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
+=fancy-button-size($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
   // better padding for smaller buttons
-  !v_padding = 0
-  !h_padding = 0
-  @if !font_size > 15
-    !v_padding = floor(!font_size/3.5)
-    !h_padding = !font_size
+  $v_padding: 0
+  $h_padding: 0
+  @if $font_size > 15
+    $v_padding: floor($font_size / 3.5)
+    $h_padding: $font_size
   @else
-    !v_padding = floor(!font_size/5)
-    !h_padding = floor(!font_size/1.2)
-
-  @if !radius > 0
-    +border-radius(!radius)
-  font-size= !font_size
-  line-height= !line_height
-  +fancy-button-padding(!v_padding, !h_padding, !border_width)
-
-=fancy-button-padding(!v_padding, !h_padding, !border_width = !fb_border_width)
-  !v_padding_active = !v_padding - 1px
-  !h_padding_active = !h_padding - 1px
-  padding= !v_padding !h_padding
-  border-width= !border_width
+    $v_padding: floor($font_size / 5)
+    $h_padding: floor($font_size / 1.2)
+  @if $radius > 0
+    +border-radius($radius)
+  font-size: $font_size
+  line-height: $line_height
+  +fancy-button-padding($v_padding, $h_padding, $border_width)
+
+=fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width)
+  $v_padding_active: $v_padding - 1px
+  $h_padding_active: $h_padding - 1px
+  padding: $v_padding $h_padding
+  border-width: $border_width
   &:active
-    padding= !v_padding_active !h_padding_active
-    border-width= !border_width + 1px
+    padding: $v_padding_active $h_padding_active
+    border-width: $border_width + 1px
   &.disabled:active, &[disabled]
-    padding= !v_padding !h_padding
-    border-width= !border_width
+    padding: $v_padding $h_padding
+    border-width: $border_width
 
 // Reset the button's important properties to make sure they behave correctly
-=fb-reset(!font_weight = !fb_font_weight)
+=fb-reset($font_weight: $fb_font_weight)
   font-family: "Lucida Grande", Lucida, Arial, sans_serif
-  background: #{!fb_image_path} repeat-x bottom left
+  background: #{$fb_image_path} repeat-x bottom left
   margin: 0
   width: auto
   overflow: visible
   display: inline-block
   cursor: pointer
   text-decoration: none
   border-style: solid
-  font-weight= !font_weight
+  font-weight: $font_weight
   &::-moz-focus-inner
     border: none
     padding: 0
@@ -167,7 +166,7 @@
   &.disabled, &[disabled]
     +disable-button
 
-=disable-button(!opacity = .7)
-  +opacity(!opacity)
+=disable-button($opacity: 0.7)
+  +opacity($opacity)
   &:hover, &:focus
     cursor: default

lib/sass/_fancy_gradient.sass

@@ -1,28 +1,28 @@
-=fancy-gradient(!color1, !color2)
-  !top_shine = lighten(!color1, 18)
-  !bottom_glow = lighten(!color2, 10)
-  !top_middle = !color1
-  !middle = lighten(!color2, 3)
-  !bottom_middle = !color2
-  +linear-gradient(color_stops(!top_shine, !top_middle 10%, !middle 50%, !bottom_middle 50%, !bottom_glow))
+=fancy-gradient($color1, $color2)
+  $top_shine: lighten($color1, 18)
+  $bottom_glow: lighten($color2, 10)
+  $top_middle: $color1
+  $middle: lighten($color2, 3)
+  $bottom_middle: $color2
+  +linear-gradient(color_stops($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow))
 
-=invert-fancy-gradient(!color1, !color2)
-  !top = lighten(!color2, 6)
-  !bottom = lighten(!color2, 14)
-  !top_middle = lighten(!color2, 8)
-  !middle = lighten(!color2, 4)
-  !bottom_middle = lighten(!color2, 1)
-  +linear-gradient(color_stops(!top, !top_middle 30%, !middle 50%, !bottom_middle 50%, !bottom))
+=invert-fancy-gradient($color1, $color2)
+  $top: lighten($color2, 6)
+  $bottom: lighten($color2, 14)
+  $top_middle: lighten($color2, 8)
+  $middle: lighten($color2, 4)
+  $bottom_middle: lighten($color2, 1)
+  +linear-gradient(color_stops($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom))
 
-=fancy-matte-gradient(!color1, !color2)
-  +linear-gradient(color_stops(!color1, !color2))
+=fancy-matte-gradient($color1, $color2)
+  +linear-gradient(color_stops($color1, $color2))
 
-=invert-fancy-matte-gradient(!color1, !color2)
-  !top = lighten(!color2, 5)
-  !bottom = lighten(!color2, 15)
-  !middle = lighten(!color2, 8)
-  +linear-gradient(color_stops(!top, !middle 40%, !middle 85%, !bottom))
+=invert-fancy-matte-gradient($color1, $color2)
+  $top: lighten($color2, 5)
+  $bottom: lighten($color2, 15)
+  $middle: lighten($color2, 8)
+  +linear-gradient(color_stops($top, $middle 40%, $middle 85%, $bottom))
 
-/* incase an inverted custom gradient isn't specified */
-=invert-custom-fancy-gradient(!color1, !color2)
-  +custom-fancy-gradient(!color1, !color2)
+/* incase an inverted custom gradient isn't specified
+=invert-custom-fancy-gradient($color1, $color2)
+  +custom-fancy-gradient($color1, $color2)