scss Bootstrap网格，使用Susy和include-media

Posted 2021-05-18

@import "susy";
@import "include-media";


$susy-columns: 12;
$susy-gutter-width: 15px;
$susy: (
  columns: $susy-columns,
  gutter-position: inside-static, // fixed-width width gutters
  column-width: 120px,
  gutters: 30px/120px
);

// bootstrap compatible breakpoints
$breakpoints: (
  xs: 0px,
  sm: 768px,
  md: 992px,
  lg: 1200px,
);
$container-widths: (
  sm: 750px,
  md: 970px,
  lg: 1170px,
);

@mixin container() {
  margin-right: auto;
  margin-left: auto;
  padding-right: gutter();
  padding-left: gutter();
}

// common styling applied to any row (class="row" in bootstrap)
// set something to behave as a row (like having a class="row" on your element in a bootstrap project)
@mixin row() {
  @include break;
  @include susy-clearfix;
  margin-right: -(gutter());
  margin-left: -(gutter());
}

// common styling applied to any column (class="col-*" in bootstrap)
@mixin column-styles() {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
  padding-left: gutter();
  padding-right: gutter();
}

// pass a map of [sass-mq compatible breakpoint:column width] to define responsive column sizes
// this kinda matches bootstrap columns, and allows for more breakpoints if we want
// Instead of writing `<div class="col-xs-12 col-md-6 col-lg-3">` in your HTML,
// write `@include column((small: 12, desktop: 6, wide: 3))` in your Sass
@mixin column($widthList) {
  @include column-styles();
  @each $breakpoint, $width in $widthList {
    @if ($breakpoint == small) {
      width: span($width of $susy-columns);
    } @else {
      @include media(">=#{$breakpoint}") {
        width: span($width of $susy-columns);
      }
    }
  }
}

//////////////////////////////

// example!
//
// `<div class="MyComponent-wrapper">
//    <div class="MyComponent-child"></div>
//    <div class="MyComponent-child"></div>
//    <div class="MyComponent-child"></div>
//  </div>`
//  .MyComponent-wrapper {
//    @include row;
//  }
//    .MyComponent-child {
//      @include column( (small: 12, tablet: 4, wide: 2) );
//    }
//
// is the same as:
// `<div class="MyComponent-wrapper row">
//    <div class="MyComponent-child col-xs-12 col-md-4 col-lg-2"></div>
//    <div class="MyComponent-child col-xs-12 col-md-4 col-lg-2"></div>
//    <div class="MyComponent-child col-xs-12 col-md-4 col-lg-2"></div>
//  </div>`



///////////////////////////////

// this is made only to easily test if our code is working correctly when copy/pasting some bootstrap html code
// in the real world this is unnecessary
@mixin generate-column-classes($class, $grid-columns) {
  @for $i from $grid-columns through 1 {
    .col-#{$class}-#{$i} {
      width: span($i of $grid-columns);
    }
  }
}
@mixin generate-pull-classes($class, $grid-columns) {
  @for $i from $grid-columns through 0 {
    .col-#{$class}-pull-#{$i} {
      @if $i > 0 {
        right: percentage($i / $grid-columns);
      } @else {
        right: auto;
      }
    }
  }
}
@mixin generate-push-classes($class, $grid-columns) {
  @for $i from $grid-columns through 0 {
    .col-#{$class}-push-#{$i} {
      @if $i > 0 {
        left: percentage($i / $grid-columns);
      } @else {
        left: auto;
      }
    }
  }
}
@mixin generate-offset-classes($class, $grid-columns) {
  @for $i from $grid-columns through 0 {
    .col-#{$class}-offset-#{$i} {
      @include pre($i of $grid-columns);
    }
  }
}

@mixin generate-bootstrap-classes() {
  .container {
    @include container();
    
    @each $breakpoint, $width in $breakpoints {
      @if $width != 0px {
        @include media(">=#{$breakpoint}") {
          width: map-get($container-widths, $breakpoint);
        }
      }
    }
  }

  .container-fluid {
    @include container();
  }
  
  .row {
    @include row();
  }
  
  .no-gutters {
    margin-right: 0;
    margin-left: 0;
    
    > .col,
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }

  $list: '';
  @for $i from 1 through $susy-columns {
    @each $breakpoint, $width in $breakpoints {
      $list: "#{$list}, .col-#{$breakpoint}-#{$i},"
    }
  }
  #{$list} {
    @include column-styles();
  }

  @each $breakpoint, $width in $breakpoints {
    @if $width == 0px {
      @include generate-column-classes($breakpoint, $susy-columns);
      @include generate-pull-classes($breakpoint, $susy-columns);
      @include generate-push-classes($breakpoint, $susy-columns);
      @include generate-offset-classes($breakpoint, $susy-columns);
    } @else {
      @include media(">=#{$breakpoint}") {
        @include generate-column-classes($breakpoint, $susy-columns);
        @include generate-pull-classes($breakpoint, $susy-columns);
        @include generate-push-classes($breakpoint, $susy-columns);
        @include generate-offset-classes($breakpoint, $susy-columns);
      }
    }
  }
}

@include generate-bootstrap-classes();