src/scss/bootstrap-4.0.0-alpha.6/scss/mixins/_grid-framework.scss

   1 // Framework grid generation
   2 //
   3 // Used only by Bootstrap to generate the correct number of grid classes given
   4 // any value of `$grid-columns`.
   5
   6 @mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
   7   // Common properties for all breakpoints
   8   %grid-column {
   9     position: relative;
  10     width: 100%;
  11     min-height: 1px; // Prevent columns from collapsing when empty
  12
  13     @include make-gutters($gutters);
  14   }
  15
  16   @each $breakpoint in map-keys($breakpoints) {
  17     $infix: breakpoint-infix($breakpoint, $breakpoints);
  18
  19     // Allow columns to stretch full width below their breakpoints
  20     @for $i from 1 through $columns {
  21       .col#{$infix}-#{$i} {
  22         @extend %grid-column;
  23       }
  24     }
  25     .col#{$infix} {
  26       @extend %grid-column;
  27     }
  28
  29     @include media-breakpoint-up($breakpoint, $breakpoints) {
  30       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
  31       .col#{$infix} {
  32         flex-basis: 0;
  33         flex-grow: 1;
  34         max-width: 100%;
  35       }
  36       .col#{$infix}-auto {
  37         flex: 0 0 auto;
  38         width: auto;
  39       }
  40
  41       @for $i from 1 through $columns {
  42         .col#{$infix}-#{$i} {
  43           @include make-col($i, $columns);
  44         }
  45       }
  46
  47       @each $modifier in (pull, push) {
  48         @for $i from 0 through $columns {
  49           .#{$modifier}#{$infix}-#{$i} {
  50             @include make-col-modifier($modifier, $i, $columns)
  51           }
  52         }
  53       }
  54
  55       // `$columns - 1` because offsetting by the width of an entire row isn't possible
  56       @for $i from 0 through ($columns - 1) {
  57         @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
  58           .offset#{$infix}-#{$i} {
  59             @include make-col-modifier(offset, $i, $columns)
  60           }
  61         }
  62       }
  63     }
  64   }
  65 }