creating golden ratio grid with sass - fixed with

goldanratio.scss

// creating golden ratio grid with sass - fixed with

$container_width: 970;
$column_width: 70;
$column_margins: 10;
$columns: 12;

div[class*="cols_"] {
  display: inline;
  float: left;
  margin-left :  unquote($column_margins + "px");
}

// create the 12 columns below AND
// create 12 columns with margin-left
// this is for fixed width columns


@for $i from 1 through $columns {

  @if $i == 1 {

    .cols_#{$i} {
      width: unquote($column_width * $i + 'px');
    }

  } @else {

    .cols_#{$i} {
      // is there a better way of calculating this
      width: unquote(($column_width * $i) + ($column_margins * $i - $column_margins) + 'px');
    }

  }

}

@for $i from 1 through $columns {

  @if $i == 1 {

    .margin_left_cols_#{$i} {
      margin-left: unquote($column_width * $i + 'px');
    }

  } @else {

    .margin_left_cols_#{$i} {
      // is there a better way of calculating this
      margin-left: unquote(($column_width * $i) + ($column_margins * $i + $column_margins) + 'px');
    }

  }

}

.inside {
  margin-left: 0;
}