// Framework grid generation // // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. %twbs-grid-column { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); } %twbs-grid-column-float { float: left } @mixin make-grid-columns($columns: $grid-columns) { @for $i from 1 through $columns { .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i} { @extend %twbs-grid-column; } } } @mixin float-grid-columns($class, $columns: $grid-columns) { @for $i from 1 through $columns { .col-#{$class}-#{$i} { @extend %twbs-grid-column-float; } } } @mixin calc-grid-column($index, $class, $type, $columns: $grid-columns) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index} { width: percentage($index / $columns); } } @if $type == push { .col-#{$class}-push-#{$index} { left: if($index > 0, percentage($index / $columns), auto); } } @if $type == pull { .col-#{$class}-pull-#{$index} { right: if($index > 0, percentage($index / $columns), auto); } } @if $type == offset { .col-#{$class}-offset-#{$index} { margin-left: percentage($index / $columns); } } } // Create grid for specific class @mixin make-grid($class, $columns: $grid-columns) { @include float-grid-columns($class); @for $i from 0 through $columns { @include calc-grid-column($i, $class, width, $columns); @include calc-grid-column($i, $class, push, $columns); @include calc-grid-column($i, $class, pull, $columns); @include calc-grid-column($i, $class, offset, $columns); } }