_grid-framework.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  6. // Common properties for all breakpoints
  7. %grid-column {
  8. position: relative;
  9. // Prevent columns from collapsing when empty
  10. min-height: 1px;
  11. // Inner gutter via padding
  12. padding-left: ($gutter / 2);
  13. padding-right: ($gutter / 2);
  14. }
  15. @each $breakpoint in map-keys($breakpoints) {
  16. @for $i from 1 through $columns {
  17. .col-#{$breakpoint}-#{$i} {
  18. @extend %grid-column;
  19. }
  20. }
  21. @include media-breakpoint-up($breakpoint) {
  22. // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
  23. %grid-column-float-#{$breakpoint} {
  24. float: left;
  25. }
  26. @for $i from 1 through $columns {
  27. .col-#{$breakpoint}-#{$i} {
  28. @if not $enable-flex {
  29. @extend %grid-column-float-#{$breakpoint};
  30. }
  31. @include make-col-span($i, $columns);
  32. }
  33. }
  34. @each $modifier in (pull, push, offset) {
  35. @for $i from 0 through $columns {
  36. .col-#{$breakpoint}-#{$modifier}-#{$i} {
  37. @include make-col-modifier($modifier, $i, $columns)
  38. }
  39. }
  40. }
  41. }
  42. }
  43. }