_grid.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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: ($gutter / 2);
  8. padding-right: ($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) {
  15. @each $breakpoint, $container-max-width in $max-widths {
  16. @include media-breakpoint-up($breakpoint) {
  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: ($gutter / -2);
  29. margin-right: ($gutter / -2);
  30. }
  31. @mixin make-col($gutter: $grid-gutter-width) {
  32. position: relative;
  33. @if not $enable-flex {
  34. float: left;
  35. }
  36. min-height: 1px;
  37. padding-left: ($gutter / 2);
  38. padding-right: ($gutter / 2);
  39. }
  40. @mixin make-col-span($size, $columns: $grid-columns) {
  41. @if $enable-flex {
  42. flex: 0 0 percentage($size / $columns);
  43. } @else {
  44. width: percentage($size / $columns);
  45. }
  46. }
  47. @mixin make-col-offset($size, $columns: $grid-columns) {
  48. margin-left: percentage($size / $columns);
  49. }
  50. @mixin make-col-push($size, $columns: $grid-columns) {
  51. left: if($size > 0, percentage($size / $columns), auto);
  52. }
  53. @mixin make-col-pull($size, $columns: $grid-columns) {
  54. right: if($size > 0, percentage($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. }