@use "sass:math"; .cl-col { width: 100%; box-sizing: border-box; &::before { content: ""; display: block; } } [class*="cl-col-"] { float: left; box-sizing: border-box; } .cl-col-0 { display: none; width: 0%; } @for $i from 1 through 24 { .cl-col-push-#{$i}, .cl-col-pull-#{$i} { position: relative; } } @for $i from 1 through 24 { $w: math.div(100%, 24); .cl-col-#{$i} { width: $w * $i; } .cl-col-offset-#{$i} { margin-left: $w * $i; } .cl-col-pull-#{$i} { right: $w * $i; } .cl-col-push-#{$i} { left: $w * $i; } }