SASS 960 fluid grid

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 {

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..

StackExchange Code Review Q#21650, answer score: 4