Generating a grid using Sass

// Set the variables $width: 1140px; $columns: 12; $gutter: 24px; // Create the row .row { width: 100%; max-width: $width; box-sizing: border-box; padding: 0 $gutter; &:after { content: ""; display: table; clear: both; } } // set column fields .column, .columns { float: left; min-height: 1px; margin-left: $gutter; &:first-child{ margin-left: 0; } } @function columns($i){ @return ( ($width/$columns) * $i ) / $width * 100; } @for $i from 1 through $columns{ .col-#{$i} { width: calc( #{columns($i)}% - #{$gutter}); } }