3
\$\begingroup\$

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;
    }
  }
\$\endgroup\$
  • \$\begingroup\$ It's possible to write a loop that will generate those, using names such as "column.8" and "offset-by-3" (that is, 3 instead of three). I don't know SASS enough to write it myself though. This will make your code much shorter and your $width variable will become useful. :) \$\endgroup\$ – Quentin Pradet Feb 13 '13 at 8:33
4
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ Great answer - exactly what I was looking for thanks. \$\endgroup\$ – thmsmxwll Feb 13 '13 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.