scss 自定义SASS Bootstrap Column Sizes.scss

Posted 2021-05-18

// ++++++++++++++++ HOW TO USE ++++++++++++++++
Copy the included mixins and functions into _mixins.scss
Say we want to have a custom grid size that applies at $screen-sm-min
In _grid.scss find @media (min-width: $screen-sm-min) and add the following to the end
  // Custom Sizes
  @include calc-grid(8.5, sm, width);
  @include calc-grid(3.5, sm, width);
  @include make-grid-columns-float-custom(sm, "8r5");
  @include make-grid-columns-float-custom(sm, "3r5");
  
This gives us a custom column size of 8.5 and 3.5
Notice the 8r5 and 3r5 in make-grid-columns-float-custom
  If we had used 8.5 and 3.5 instead the class name would become .col-sm-8.5 which would represent an element
  that contains both the class col-sm-8 and the seperate class 5.
  To avoid this I went with the aforementioned format.
If you want a custom offset of 0.5 then you'd also add:
  @include calc-grid(0.5, sm, offset);

// -----------------------------------------------------
// _mixins.scss
@mixin make-grid-columns-float-custom($class, $index) {
  $classname: ".col-" + $class + "-" + $index;
  #{$classname} {
    float: left;
  }
}

@function rmod($val1) {
  $frac: $val1 - floor($val1); // discard int
  $return: 0;
  $tmp: 0;
  // End result will be 0.0
  @while $frac > 0 {
    $frac: $frac * 10;
    @if $frac > 1 {
      /* During the final loop $frac will end with .0
         but reports 0.0 == 0.0 as false with this functions
         sequence of events (normally 0.0 == 0.0 returns
         true). The following @if statement is a workaround
         and 0.0 < 0 returns true which correctly terminates
         the loop. */
      @if $frac - $frac*10 < 5 {
        $tmp: round($frac);
      } @else {
        $tmp: floor($frac);
      }
    } @else {
      $tmp: 0;
    }
    $return: $return * 10;
    @if $tmp != 0 {
      $return: $return + $tmp;
      $frac: $frac - $tmp;
    }
  }
  @return $return;
}

@mixin calc-grid($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    $index_classname: $index;
    @if (floor($index) != $index) {
      $index_classname: floor($index) + "r" + rmod($index);
    }
    .col-#{$class}-#{$index_classname} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
  @if ($type == offset) {
    $index_classname: $index;
    @if (floor($index) != $index) {
      $index_classname: floor($index) + "r" + rmod($index);
    }
    .col-#{$class}-offset-#{$index_classname} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
}