updated mixins for Sass 3.2

library/scss/_mixins.scss

@@ -44,6 +44,13 @@ TOOLS
 	overflow: hidden;
 }
 
+/* apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing:    border-box;
+  box-sizing:         border-box;
+}
+
 /*********************
 COLORS
 Need help w/ choosing your colors? Try this site out:
@@ -143,75 +150,66 @@ BORDER RADIUS
 *********************/
 
 /*
-NOTE: For older browser support (and some mobile),
-don't use the shorthand to define *different* corners.
-
-USAGE: @include rounded(4px);
-
+I totally rewrote this to be cleaner and easier to use.
+You'll need to be using Sass 3.2+ for these to work.
+Thanks to @anthonyshort for the inspiration on these.
+USAGE: @include border-radius(4px 4px 0 0);
 */
-@mixin rounded($radius: 4px) {
-	-webkit-border-radius: $radius;
-	-moz-border-radius:    $radius;
-	border-radius:         $radius;
-}
 
-/*
-Instead of having a seperate mixin for the different
-borders, we're using the mixin from 320 & Up to make
-things easier to use.
-
-USAGE: @include border-radius(4px,4px,0,0);
+@mixin border-radius($radius...) {
+	// defining prefixes so we can use them in mixins below
+	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
+  @each $prefix in $prefixes {
+    #{$prefix}-border-radius: $radius;
+  }
 
-*/
-@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
-	-webkit-border-top-right-radius:    $topright;
-	-webkit-border-bottom-right-radius: $bottomright;
-	-webkit-border-bottom-left-radius:  $bottomleft;
-	-webkit-border-top-left-radius:     $topleft;
-	-moz-border-radius-topright:        $topright;
-	-moz-border-radius-bottomright:     $bottomright;
-	-moz-border-radius-bottomleft:      $bottomleft;
-	-moz-border-radius-topleft:         $topleft;
-	border-top-right-radius:            $topright;
-	border-bottom-right-radius:         $bottomright;
-	border-bottom-left-radius:          $bottomleft;
-	border-top-left-radius:             $topleft;
-	-webkit-background-clip:            padding-box;
-	-moz-background-clip:               padding;
-	background-clip:                    padding-box;
+  border-radius: $radius;
 }
 
-
 /*********************
 TRANISTION
 *********************/
 
-/* @include transition(all,2s,ease-out); */
-@mixin css-transition($what: all, $time: 0.2s, $how: ease-in-out) {
-	-webkit-transition: $what $time $how;
-	-moz-transition:    $what $time $how;
-	-ms-transition:     $what $time $how;
-	-o-transition:      $what $time $how;
-	transition:         $what $time $how;
+/*
+I totally rewrote this to be cleaner and easier to use.
+You'll need to be using Sass 3.2+ for these to work.
+Thanks to @anthonyshort for the inspiration on these.
+USAGE: @include transition(all 0.2s ease-in-out);
+*/
+
+@mixin transition($transition...) {
+	// defining prefixes so we can use them in mixins below
+	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
+  @each $prefix in $prefixes {
+    #{$prefix}-transition: $transition;
+  }
+
+  transition: $transition;
 }
 
+
 /*********************
 BOX SHADOWS
 *********************/
 
-/* @include box-shadow(5px, 5px, 10px, #000); */
-@mixin box-shadow($shadow-1,
-  $shadow-2: false, $shadow-3: false,
-  $shadow-4: false, $shadow-5: false,
-  $shadow-6: false, $shadow-7: false,
-  $shadow-8: false, $shadow-9: false) {
-  $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
-
-  -webkit-box-shadow: $full;
-     -moz-box-shadow: $full;
-          box-shadow: $full;
+/*
+I totally rewrote this to be cleaner and easier to use.
+You'll need to be using Sass 3.2+ for these to work.
+Thanks to @anthonyshort for the inspiration on these.
+USAGE: @include box-shadow(inset 0 0 4px rgba(0,0,0,0.22));
+*/
+
+@mixin box-shadow($shadow...) {
+	// defining prefixes so we can use them in mixins below
+	$prefixes:      ("-webkit", "-moz", "-ms", "-o",  "");
+  @each $prefix in $prefixes {
+    #{$prefix}-box-shadow: $shadow;
+  }
+
+  box-shadow: $shadow;
 }
 
+
 /*********************
 CSS3 GRADIENTS
 Be careful with these since they can
@@ -262,7 +260,7 @@ BUTTONS
 	cursor: pointer;
 	margin-bottom: 20px;
 	line-height: 21px;
-	@include rounded(4px);
+	@include border-radius(4px);
 	@include css-gradient($link-color, darken($link-color, 5%));
 
 
@@ -283,9 +281,8 @@ BUTTONS
 	border-color: darken($bones-blue, 10%);
 	text-shadow: 0 1px 1px darken($bones-blue, 10%);
 	@include css-gradient( $bones-blue, darken($bones-blue, 5%) );
-	-webkit-box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
-       -moz-box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
-   	        box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
+	@include box-shadow(inset 0 0 3px lighten($bones-blue, 16%));
+
 	&:hover, &:focus {
 		border-color: darken($bones-blue, 15%);
 		@include css-gradient( darken($bones-blue, 4%), darken($bones-blue, 10%) );