Cacher is the code snippet organizer for pro developers

/////////////////
// Semantic.gs // for SCSS: http://sass-lang.com/
/////////////////
$column-width: 60px;
$total-width: 100%;

// Utility function — you should never need to modify this
@function gridsystem-width($columns:$columns) {
  @return ($column-width * $columns) + ($gutter-width * $columns);
}

@function getColumnWidth($x, $columns:$columns) {
  @return ($total-width / $columns) * $x;
}

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
// $min-width: 999999;
// $correction: 0.5 / $min-width * 100;

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix() {
  *zoom:1;

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

//////////
// GRID //
//////////

body {
  width: 100%;
  @include clearfix();
}

@mixin row($columns:$columns) {
  display: block;
  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1);
  // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction;
  // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction;
  @include clearfix();
}
@mixin column($x,$columns:$columns) {
  display: inline;
  float: left;
  /* Previous GS was changing gutter width to percentages. Fixed code for 100% total width layouts ONLY!!! */
  // width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns));
  // margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns));
  // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction;
  // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction;

  width: calc(#{getColumnWidth($x, $columns)} - #{$gutter-width});
  margin: 0 ($gutter-width * .5);
}
@mixin push($offset:1) {
  // margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
  margin-left: calc(#{getColumnWidth($offset)} + #{($gutter-width * .5)});
}
@mixin pull($offset:1) {
  // margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
  margin-right: calc(#{getColumnWidth($offset)} + #{($gutter-width * .5)});
}