.grid {
margin: auto; width: grid-base-width() * 96; display: flex; flex-wrap: wrap; align-items: baseline; @for $col_size from 1 through 12 { .grid-col-#{ $col_size } { padding: 0 grid-base-width(); width: grid-base-width() * 8 * $col_size; box-sizing: border-box; flex-shrink: 0; } @for $off_size from 1 through 12-$col_size { .grid-col-#{ $col_size }-off-#{ $off_size } { @extend .grid-col-#{ $col_size }; margin-left: grid-base-width() * (8 * $off_size + 1); } } }
}