Deprecate the blueprint span mixin in favor of the blueprint span function.

doc-src/content/CHANGELOG.markdown

@@ -30,6 +30,12 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
   syntax across all browsers. It is now possible to configure which browsers support which
   experimental functions outside of the compass release cycle. For details, see the
   [cross browser helpers](/reference/compass/helpers/cross-browser/).
+* [Blueprint] Added a new sass function called span($n) to the grid module which replaces
+  the now **deprecated span mixin**. If you are using this mixin, please replace it with:
+  `width: span($n)`.
+* [Blueprint] Blueprint no longer adds `!important` to the widths of `input`, `textarea`,
+  and `select` form fields, so compass no longer defaults to using `!important` in those cases.
+  If you were relying on this behavior, you may need to adjust your stylesheets accordingly.
 
 
 0.11.alpha.4 (12/08/2010)

examples/blueprint_semantic/src/liquid.scss

@@ -20,11 +20,11 @@ body.blueprint {
 
 body#index {
   #page-header {
-    @include span(6); }
+    width: span(6); }
   #files-header {
-    @include span(8); }
+    width: span(8); }
   #description-header {
-    @include span(10); }
+    width: span(10); }
   #info {
     @include box;
     ul {

examples/blueprint_semantic/src/screen.scss

@@ -20,11 +20,11 @@ body.blueprint {
 
 body#index {
   #page-header {
-    @include span(6); }
+    width: span(6); }
   #files-header {
-    @include span(8); }
+    width: span(8); }
   #description-header {
-    @include span(10); }
+    width: span(10); }
   #info {
     @include box;
     ul {

frameworks/blueprint/stylesheets/blueprint/_grid.scss

@@ -54,15 +54,15 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
   @for $n from 1 to $blueprint-grid-columns {
     .span-#{$n} {
       @extend .column;
-      @include span($n); } }
+      width: span($n); } }
   .span-#{$blueprint-grid-columns} {
     @extend .column;
-    @include span($blueprint-grid-columns);
+    width: span($blueprint-grid-columns);
     margin: 0; }
   input, textarea, select {
     @for $n from 1 through $blueprint-grid-columns {
       &.span-#{$n} {
-        @include span($n, true); } } }
+        width: span($n); } } }
   // Add these to a column to append empty cols.
   @for $n from 1 to $blueprint-grid-columns {
     .append-#{$n} {
@@ -106,9 +106,9 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
 // Use this mixins to set the width of n columns.
 @mixin column($n, $last: false) {
   @include column-base($last);
-  @include span($n); }
+  width: span($n); }
 
-// Return the width of `$n` columns.
+// Return the width in pixels of `$n` columns.
 @function span($n) {
   @return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
 }
@@ -117,7 +117,10 @@ $blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns
 // Most of the time you'll want to use `+column` instead.
 //
 // This mixin is especially useful for aligning tables to the grid.
+//
+// @deprecated Please use the span function with the width property instead.
 @mixin span($n, $important: false) {
+  @warn "The span mixin is deprecated. Please use the span function instead. E.g. width: span(#{$n})";
   @if $important {
     width: span($n) !important; }
   @else {

test/fixtures/stylesheets/blueprint/css/screen.css

@@ -315,53 +315,53 @@ caption {
   margin: 0; }
 
 input.span-1, textarea.span-1, select.span-1 {
-  width: 30px !important; }
+  width: 30px; }
 input.span-2, textarea.span-2, select.span-2 {
-  width: 70px !important; }
+  width: 70px; }
 input.span-3, textarea.span-3, select.span-3 {
-  width: 110px !important; }
+  width: 110px; }
 input.span-4, textarea.span-4, select.span-4 {
-  width: 150px !important; }
+  width: 150px; }
 input.span-5, textarea.span-5, select.span-5 {
-  width: 190px !important; }
+  width: 190px; }
 input.span-6, textarea.span-6, select.span-6 {
-  width: 230px !important; }
+  width: 230px; }
 input.span-7, textarea.span-7, select.span-7 {
-  width: 270px !important; }
+  width: 270px; }
 input.span-8, textarea.span-8, select.span-8 {
-  width: 310px !important; }
+  width: 310px; }
 input.span-9, textarea.span-9, select.span-9 {
-  width: 350px !important; }
+  width: 350px; }
 input.span-10, textarea.span-10, select.span-10 {
-  width: 390px !important; }
+  width: 390px; }
 input.span-11, textarea.span-11, select.span-11 {
-  width: 430px !important; }
+  width: 430px; }
 input.span-12, textarea.span-12, select.span-12 {
-  width: 470px !important; }
+  width: 470px; }
 input.span-13, textarea.span-13, select.span-13 {
-  width: 510px !important; }
+  width: 510px; }
 input.span-14, textarea.span-14, select.span-14 {
-  width: 550px !important; }
+  width: 550px; }
 input.span-15, textarea.span-15, select.span-15 {
-  width: 590px !important; }
+  width: 590px; }
 input.span-16, textarea.span-16, select.span-16 {
-  width: 630px !important; }
+  width: 630px; }
 input.span-17, textarea.span-17, select.span-17 {
-  width: 670px !important; }
+  width: 670px; }
 input.span-18, textarea.span-18, select.span-18 {
-  width: 710px !important; }
+  width: 710px; }
 input.span-19, textarea.span-19, select.span-19 {
-  width: 750px !important; }
+  width: 750px; }
 input.span-20, textarea.span-20, select.span-20 {
-  width: 790px !important; }
+  width: 790px; }
 input.span-21, textarea.span-21, select.span-21 {
-  width: 830px !important; }
+  width: 830px; }
 input.span-22, textarea.span-22, select.span-22 {
-  width: 870px !important; }
+  width: 870px; }
 input.span-23, textarea.span-23, select.span-23 {
-  width: 910px !important; }
+  width: 910px; }
 input.span-24, textarea.span-24, select.span-24 {
-  width: 950px !important; }
+  width: 950px; }
 
 .append-1 {
   padding-right: 40px; }

test/fixtures/stylesheets/blueprint/css/single-imports/grid.css

@@ -88,53 +88,53 @@
   margin: 0; }
 
 input.span-1, textarea.span-1, select.span-1 {
-  width: 30px !important; }
+  width: 30px; }
 input.span-2, textarea.span-2, select.span-2 {
-  width: 70px !important; }
+  width: 70px; }
 input.span-3, textarea.span-3, select.span-3 {
-  width: 110px !important; }
+  width: 110px; }
 input.span-4, textarea.span-4, select.span-4 {
-  width: 150px !important; }
+  width: 150px; }
 input.span-5, textarea.span-5, select.span-5 {
-  width: 190px !important; }
+  width: 190px; }
 input.span-6, textarea.span-6, select.span-6 {
-  width: 230px !important; }
+  width: 230px; }
 input.span-7, textarea.span-7, select.span-7 {
-  width: 270px !important; }
+  width: 270px; }
 input.span-8, textarea.span-8, select.span-8 {
-  width: 310px !important; }
+  width: 310px; }
 input.span-9, textarea.span-9, select.span-9 {
-  width: 350px !important; }
+  width: 350px; }
 input.span-10, textarea.span-10, select.span-10 {
-  width: 390px !important; }
+  width: 390px; }
 input.span-11, textarea.span-11, select.span-11 {
-  width: 430px !important; }
+  width: 430px; }
 input.span-12, textarea.span-12, select.span-12 {
-  width: 470px !important; }
+  width: 470px; }
 input.span-13, textarea.span-13, select.span-13 {
-  width: 510px !important; }
+  width: 510px; }
 input.span-14, textarea.span-14, select.span-14 {
-  width: 550px !important; }
+  width: 550px; }
 input.span-15, textarea.span-15, select.span-15 {
-  width: 590px !important; }
+  width: 590px; }
 input.span-16, textarea.span-16, select.span-16 {
-  width: 630px !important; }
+  width: 630px; }
 input.span-17, textarea.span-17, select.span-17 {
-  width: 670px !important; }
+  width: 670px; }
 input.span-18, textarea.span-18, select.span-18 {
-  width: 710px !important; }
+  width: 710px; }
 input.span-19, textarea.span-19, select.span-19 {
-  width: 750px !important; }
+  width: 750px; }
 input.span-20, textarea.span-20, select.span-20 {
-  width: 790px !important; }
+  width: 790px; }
 input.span-21, textarea.span-21, select.span-21 {
-  width: 830px !important; }
+  width: 830px; }
 input.span-22, textarea.span-22, select.span-22 {
-  width: 870px !important; }
+  width: 870px; }
 input.span-23, textarea.span-23, select.span-23 {
-  width: 910px !important; }
+  width: 910px; }
 input.span-24, textarea.span-24, select.span-24 {
-  width: 950px !important; }
+  width: 950px; }
 
 .append-1 {
   padding-right: 40px; }

test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css

@@ -90,53 +90,53 @@
   margin: 0; }
 
 input.span-1, textarea.span-1, select.span-1 {
-  width: 30px !important; }
+  width: 30px; }
 input.span-2, textarea.span-2, select.span-2 {
-  width: 70px !important; }
+  width: 70px; }
 input.span-3, textarea.span-3, select.span-3 {
-  width: 110px !important; }
+  width: 110px; }
 input.span-4, textarea.span-4, select.span-4 {
-  width: 150px !important; }
+  width: 150px; }
 input.span-5, textarea.span-5, select.span-5 {
-  width: 190px !important; }
+  width: 190px; }
 input.span-6, textarea.span-6, select.span-6 {
-  width: 230px !important; }
+  width: 230px; }
 input.span-7, textarea.span-7, select.span-7 {
-  width: 270px !important; }
+  width: 270px; }
 input.span-8, textarea.span-8, select.span-8 {
-  width: 310px !important; }
+  width: 310px; }
 input.span-9, textarea.span-9, select.span-9 {
-  width: 350px !important; }
+  width: 350px; }
 input.span-10, textarea.span-10, select.span-10 {
-  width: 390px !important; }
+  width: 390px; }
 input.span-11, textarea.span-11, select.span-11 {
-  width: 430px !important; }
+  width: 430px; }
 input.span-12, textarea.span-12, select.span-12 {
-  width: 470px !important; }
+  width: 470px; }
 input.span-13, textarea.span-13, select.span-13 {
-  width: 510px !important; }
+  width: 510px; }
 input.span-14, textarea.span-14, select.span-14 {
-  width: 550px !important; }
+  width: 550px; }
 input.span-15, textarea.span-15, select.span-15 {
-  width: 590px !important; }
+  width: 590px; }
 input.span-16, textarea.span-16, select.span-16 {
-  width: 630px !important; }
+  width: 630px; }
 input.span-17, textarea.span-17, select.span-17 {
-  width: 670px !important; }
+  width: 670px; }
 input.span-18, textarea.span-18, select.span-18 {
-  width: 710px !important; }
+  width: 710px; }
 input.span-19, textarea.span-19, select.span-19 {
-  width: 750px !important; }
+  width: 750px; }
 input.span-20, textarea.span-20, select.span-20 {
-  width: 790px !important; }
+  width: 790px; }
 input.span-21, textarea.span-21, select.span-21 {
-  width: 830px !important; }
+  width: 830px; }
 input.span-22, textarea.span-22, select.span-22 {
-  width: 870px !important; }
+  width: 870px; }
 input.span-23, textarea.span-23, select.span-23 {
-  width: 910px !important; }
+  width: 910px; }
 input.span-24, textarea.span-24, select.span-24 {
-  width: 950px !important; }
+  width: 950px; }
 
 .append-1 {
   padding-left: 40px; }