exended.css

.container {
  width: 950px;
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
}
.container {
  display: block;
}

.column, #header, #footer, #sidebar, #content {
  display: inline;
  float: left;
  margin-right: 10px;
}
* html .column, * html #header, * html #footer, * html #sidebar, * html #content {
  overflow-x: hidden;
}

.last, #content {
  margin-right: 0;
}

#header, #footer {
  width: 950px;
}

#sidebar {
  width: 310px;
}

#content {
  width: 630px;
}

extended.scss

@import "blueprint/semantic-grid";

#header, #footer { @include column(24); }
#sidebar { @include column(8); }
#content { @include column(16, last); }

mixed_in.scss

@import "blueprint/semantic-grid";

#header, #footer {
  @include column-base;
  @include span(14);
  @include last;
}

#sidebar {
  @include column-base;
  @include span(14);
  @include last;
}

#content {
  @include column-base;
  @include span(14);
  @include last;
}

mixedin.css

.container {
  width: 950px;
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
}
.container {
  display: block;
}

.column {
  display: inline;
  float: left;
  margin-right: 10px;
}
* html .column {
  overflow-x: hidden;
}

.last {
  margin-right: 0;
}

#header, #footer {
  display: inline;
  float: left;
  margin-right: 10px;
  width: 550px;
  margin-right: 0;
}
* html #header, * html #footer {
  overflow-x: hidden;
}

#sidebar {
  display: inline;
  float: left;
  margin-right: 10px;
  width: 550px;
  margin-right: 0;
}
* html #sidebar {
  overflow-x: hidden;
}

#content {
  display: inline;
  float: left;
  margin-right: 10px;
  width: 550px;
  margin-right: 0;
}
* html #content {
  overflow-x: hidden;
}

semantic_grid.scss

@import "compass/utilities/general/float.scss";

// The number of columns in the grid.
$blueprint-grid-columns: 24 !default;

// The width of a column
$blueprint-grid-width: 30px !default;

// The amount of margin between columns
$blueprint-grid-margin: 10px !default;

// The width of a column including the margin. With default settings this is `40px`.
$blueprint-grid-outer-width: $blueprint-grid-width + $blueprint-grid-margin;

// The width of the container. With default settings this is `950px`.
$blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin;

// A container should group all your columns
.container { 
  width: $blueprint-container-size;
  margin: 0 auto;
  @include clearfix;
}

@mixin column-base {
  @include float-left;
  margin-right: $blueprint-grid-margin;
  * html & { overflow-x: hidden; }  
}

// The shared styles for all column elements.
.column { @include column-base; }

// The last column in a row needs this mixin or it will end up
// on the next row in some browsers.
@mixin last { margin-right: 0; }

// Or you should @extend .last if your selector is 16 characters or less.
// Or you can apply .last to your markup -- it's semantic enough.
.last { @include last; }

// Set only the width of an element to align it with the grid.
// Most of the time you'll want to use `+column` instead.
//
// This mixin is especially useful for aligning tables to the grid.
@mixin span($n, $override: false) {
  $width: $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
  @if $override { width: $width !important; }
  @else         { width: $width;            }
}

// Use this mixins to set the width of n columns.
@mixin column($n, $last: false) {
  @extend .column;
  @if $last { @extend .last }
  @include span($n);
}