SCSS skeleton grids with support for fluid or fixed units.

_config.scss

$layout-max-width:    64em;
$layout-break-point:  48em;
$layout-min-width:    20em;
$layout-column-count: 12;
$layout-column-width: 60;
$layout-gutter-width: 20;

_grid.scss

@function __grid-base-size() {
  @return ($layout-column-count * ($layout-column-width + $layout-gutter-width));
}

@function __grid-column-size() {
  @if unitless($layout-column-width) {
    @return ($layout-column-width / __grid-base-size());
  }
  @else {
    @return $layout-column-width;
  }
}

@function __grid-gutter-size() {
  @if unitless($layout-gutter-width) {
    @return ($layout-gutter-width / __grid-base-size());
  }
  @else {
    @return $layout-gutter-width;
  }
}

@function column-width($i) {
  $width: (($layout-column-width * $i) + ($layout-gutter-width * ($i - 1)));

  @if unitless($layout-column-width) {
    @return percentage($width / __grid-base-size());
  }
  @else {
    @return $width;
  }
}

@mixin grid-container {
  max-width: $layout-max-width;
  min-width: $layout-min-width;
  margin-right: auto;
  margin-left: auto;
}

@mixin grid-colgroup {
  margin-left: percentage(__grid-gutter-size() * -1);
  @include cf;
}

@mixin grid-column {
  float: left;
  margin-left: percentage(__grid-gutter-size());
}

@mixin cf {
  &:before,
  &:after {
    display:table;
    content:"";
  }
  &:after {
    clear:both;
  }
}

skeleton.scss

// Zen-coding:  .container>.composition>.slice.desktop:1of2.mobile:1of1+.slice.desktop:1of2.mobile:1of1
.container {
  @include grid-container;
}

.composition {
  @include grid-colgroup;
}

.slice {
  @include grid-column;
}

// Desktop
.desktop\:1of1 {
  clear: left;
  width: column-width(12);
}

.desktop\:1of2 {
  width: column-width(06);
}

.desktop\:1of3 {
  width: column-width(04);
}
.desktop\:2of3 {
  width: column-width(08);
}

.desktop\:1of4 {
  width: column-width(03);
}
.desktop\:3of4 {
  width: column-width(09);
}

// Handheld
@media only screen and (max-width: $layout-break-point) {

  .handheld\:1of1 {
    clear:left;
    width: column-width(12);
  }

  .handheld\:1of2 {
    width: column-width(06);

    &:nth-of-type(3n) {
      clear: left;
    }
  }

  .handheld\:1of3 {
    width: column-width(04);

    &:nth-of-type(4n) {
      clear: left;
    }
  }

}