SASS 960 fluid grid

Question

I'm currently converting a CSS 960 fluid grid to SASS. How can I improve my current implementation? My column classes .two.columns are getting a bit unruly. Is there a better way to write them?

// Variables 

$width: 960px;

.container { 
    position: relative;
    width: $width;
    margin: 0 auto;
    padding: 0;
    .column, .columns {
      float: left;
      display: inline;
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .row {
    margin-bottom: 20px;
  }

  // Nested Column Classes

  .column.alpha, .columns.alpha { 
    margin-left: 0; 
  }

  .column.omega, .columns.omega { 
    margin-right: 0; 
  }

  // 960 GRID
  // (1 * (960 / 16)) - (2 * 10)

  .container {
    .one {
      &.column, &.columns {
        width: 40px;
      }
    }
    .two.columns {
      width: 100px;
    }
    .three.columns {
      width: 160px;
    }
    .four.columns {
      width: 220px;
    }
    .five.columns {
      width: 280px;
    }
    .six.columns {
      width: 340px;
    }
    .seven.columns {
      width: 400px;
    }
    .eight.columns {
      width: 460px;
    }
    .nine.columns {
      width: 520px;
    }
    .ten.columns {
      width: 580px;
    }
    .eleven.columns {
      width: 640px;
    }
    .twelve.columns {
      width: 700px;
    }
    .thirteen.columns {
      width: 760px;
    }
    .fourteen.columns {
      width: 820px;
    }
    .fifteen.columns {
      width: 880px;
    }
    .sixteen.columns {
      width: 940px;
    }
    .one-third.column {
      width: 300px;
    }
    .two-thirds.column {
      width: 620px;
    }
    .offset-by-one {
      padding-left: 60px;
    }
    .offset-by-two {
      padding-left: 120px;
    }
    .offset-by-three {
      padding-left: 180px;
    }
    .offset-by-four {
      padding-left: 240px;
    }
    .offset-by-five {
      padding-left: 300px;
    }
    .offset-by-six {
      padding-left: 360px;
    }
    .offset-by-seven {
      padding-left: 420px;
    }
    .offset-by-eight {
      padding-left: 480px;
    }
    .offset-by-nine {
      padding-left: 540px;
    }
    .offset-by-ten {
      padding-left: 600px;
    }
    .offset-by-eleven {
      padding-left: 660px;
    }
    .offset-by-twelve {
      padding-left: 720px;
    }
    .offset-by-thirteen {
      padding-left: 780px;
    }
    .offset-by-fourteen {
      padding-left: 840px;
    }
    .offset-by-fifteen {
      padding-left: 900px;
    }
  }

Answer 1

You could use a for loop to have it generate the columns for you, like...

$grid-column: 16;
$grid-gutter: 10px;
$column-width: 50px;

.column {
    position: relative;
    display: inline;
    float: left;
    margin-right: ($grid-gutter / 2);
    margin-left: ($grid-gutter / 2);
}

@for $n from 1 through $grid-column {
    .grid-#{$n} {
        @extend .column;
        width: ($column-width * $n) + ($grid-gutter * ($n - 1));
    }
}

@for $n from 1 through $grid-column - 1 {
    .offset-#{$n} {
        padding-left: ($column-width * $n) + ($grid-gutter * $n);
    }
}

That would output

.column, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
    position: relative;
    display: inline;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

.grid-1 {
    width: 50px;
}

.grid-2 {
    width: 110px;
}

.grid-3 {
    width: 170px;
}

.grid-4 {
    width: 230px;
}

.grid-5 {
    width: 290px;
}

.grid-6 {
    width: 350px;
}

.grid-7 {
    width: 410px;
}

.grid-8 {
    width: 470px;
}

.grid-9 {
    width: 530px;
}

.grid-10 {
    width: 590px;
}

.grid-11 {
    width: 650px;
}

.grid-12 {
    width: 710px;
}

.grid-13 {
    width: 770px;
}

.grid-14 {
    width: 830px;
}

.grid-15 {
    width: 890px;
}

.grid-16 {
    width: 950px;
}

.offset-1 {
    padding-left: 60px;
}

.offset-2 {
    padding-left: 120px;
}

.offset-3 {
    padding-left: 180px;
}

.offset-4 {
    padding-left: 240px;
}

.offset-5 {
    padding-left: 300px;
}

.offset-6 {
    padding-left: 360px;
}

.offset-7 {
    padding-left: 420px;
}

.offset-8 {
    padding-left: 480px;
}

.offset-9 {
    padding-left: 540px;
}

.offset-10 {
    padding-left: 600px;
}

.offset-11 {
    padding-left: 660px;
}

.offset-12 {
    padding-left: 720px;
}

.offset-13 {
    padding-left: 780px;
}

.offset-14 {
    padding-left: 840px;
}

.offset-15 {
    padding-left: 900px;
}

etc..