Creating a grid using SASS. Code examples

@function grid-column-width($n) {
// calculate column size and subtract padding

@return $column-width * $n - ( $column-margin * ($total-columns - $n) / $total-columns );

Function call example grid-column-width():

  .one.column,
  .one.columns          { width: grid-column-width(1);  }
  .two.columns          { width: grid-column-width(2);  }
  .three.columns        { width: grid-column-width(3);  }
  .four.columns         { width: grid-column-width(4);  }
  .five.columns         { width: grid-column-width(5);  }
  .six.columns          { width: grid-column-width(6);  }
  .seven.columns        { width: grid-column-width(7);  }
  .eight.columns        { width: grid-column-width(8);  }
  .nine.columns         { width: grid-column-width(9);  }
  .ten.columns          { width: grid-column-width(10); }
  .eleven.columns       { width: grid-column-width(11); }
  .twelve.columns { width: 100%; margin-left: 0; }

The result of the function

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }