Quickly build a simple grid with Sass

All you need are some variables and loops. Granted, some may argue for readability, but as long as what you're doing is well documented, it can save you a lot of time. Especially if you want to add/remove breakpoints.

The end result should be a simple class list that is responsible for the width of your column. I'm using a seperate class to take care of floats and padding.

For my purposes, I'm using `.layout__item` and `.g-1-12`, `.g-2-12`… etc

`.layout__item` will contain the following:

.layout__item {
    padding-left: 15px;
    padding-right: 15px;
    float: left;
}

Starting off, I need a formula for calculating width based off a fraction of how many columns I want.

Say I wanted a column to extend 4/12 of the page, I'd use:

`(4 / 12) * 100%`

In Sass, this would return 33.33333%. Happy days, so let's keep that in a function.

@function percentage-width($span, $columns) {
  @return ($span / $columns) * 100%;
}

I’m then going to keep my colums in a variable.

$grid-column: 12;

Next, I’m going to use a for loop to iterate through my number of columns, and use the percentage-width function.

@for $i from 1 through $grid-columns {
  .u-#{$i}-#{$grid-columns} {
    width: percentage-width($i, $grid-columns);
  }
}

This yields the following:

.u-1-12 {
  width: 8.33333%; }

.u-2-12 {
  width: 16.66667%; }

.u-3-12 {
  width: 25%; }

etc…

So what about breakpoints? The above example would surely serve well as a mobile-first starting point.

Let’s throw in another variable, a map:

$grid-breakpoints: (
  medium: 768px,
  large: 960px
);

We can use the above loop again, but modify it slightly to include medium and large in the class name.

// Loop breakpoints to generate screen-specific grids
@each $key, $val in $grid-breakpoints {
  @media (min-width: #{$val}) {
    @for $i from 1 through $grid-columns {
      .u-#{$i}-#{$grid-columns}--#{$key} {
        width: percentage-width($i, $grid-columns);
      }
    }
  }
}

It’s the same loop, but repeated for every breakpoint defined in $grid-breakpoints, resulting in:

@media (min-width: 768px) {
  .u-1-12--medium {
    width: 8.33333%; }
  .u-2-12--medium {
    width: 16.66667%; }

And so on.

You can grab the source and see a small example below.