_grid.scss 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /// Grid system
  2. //
  3. // Generate semantic grid columns with these mixins.
  4. @mixin make-container($gutter: $grid-gutter-width) {
  5. margin-left: auto;
  6. margin-right: auto;
  7. padding-left: calc($gutter / 2);
  8. padding-right: calc($gutter / 2);
  9. @if not $enable-flex {
  10. @include clearfix();
  11. }
  12. }
  13. // For each breakpoint, define the maximum width of the container in a media query
  14. @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  15. @each $breakpoint, $container-max-width in $max-widths {
  16. @include media-breakpoint-up($breakpoint, $breakpoints) {
  17. max-width: $container-max-width;
  18. }
  19. }
  20. }
  21. @mixin make-row($gutter: $grid-gutter-width) {
  22. @if $enable-flex {
  23. display: flex;
  24. flex-wrap: wrap;
  25. } @else {
  26. @include clearfix();
  27. }
  28. margin-left: calc($gutter / -2);
  29. margin-right: calc($gutter / -2);
  30. }
  31. @mixin make-col($size, $columns: $grid-columns) {
  32. position: relative;
  33. min-height: 1px;
  34. padding-right: calc($grid-gutter-width / 2);
  35. padding-left: calc($grid-gutter-width / 2);
  36. @if $enable-flex {
  37. flex: 0 0 percentage(calc($size / $columns));
  38. // Add a `max-width` to ensure content within each column does not blow out
  39. // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  40. // do not appear to require this.
  41. max-width: percentage(calc($size / $columns));
  42. } @else {
  43. float: left;
  44. width: percentage(calc($size / $columns));
  45. }
  46. }
  47. @mixin make-col-offset($size, $columns: $grid-columns) {
  48. margin-left: percentage(calc($size / $columns));
  49. }
  50. @mixin make-col-push($size, $columns: $grid-columns) {
  51. left: if($size > 0, percentage(calc($size / $columns)), auto);
  52. }
  53. @mixin make-col-pull($size, $columns: $grid-columns) {
  54. right: if($size > 0, percentage(calc($size / $columns)), auto);
  55. }
  56. @mixin make-col-modifier($type, $size, $columns) {
  57. // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
  58. @if $type == push {
  59. @include make-col-push($size, $columns);
  60. } @else if $type == pull {
  61. @include make-col-pull($size, $columns);
  62. } @else if $type == offset {
  63. @include make-col-offset($size, $columns);
  64. }
  65. }