'no-gutters' implementation in Sass for grids

Created by: ihorzenich

We can use <div class="row no-gutters"> in html, but in case of implementing this in Sass we need to manually add zero-margin/padding:

For example:

// Grid with 'no-gutters' NOW

.example-row {  
  @include make-row(); // or just @extend .row;
  margin-left: 0;
  margin-right: 0;
}

.example-col-2 {
  @include make-col-ready(); // or just @extend .col-2;
  @include make-col(2);
  padding-left: 0;
  padding-right: 0;
}

.example-col-10 {
  @include make-col-ready();
  @include make-col(10);
  padding-left: 0;
  padding-right: 0;
}

Maybe it will be usefull to add an option for Sass mixins like:

@mixin make-row($gutters: 'gutters') {
  display: flex;
  flex-wrap: wrap;
  @if $gutters == 'gutters' {
    margin-right: ($grid-gutter-width / -2);
    margin-left:  ($grid-gutter-width / -2);
  }
}

@mixin make-col-ready($gutters: 'gutters') {
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  min-height: 1px; // Prevent collapsing
  @if $gutters == 'gutters' {
    padding-right: ($grid-gutter-width / 2);
    padding-left:  ($grid-gutter-width / 2);
  }
}

So we could write:

// Grid with 'no-gutters' AFTER

.example-row {  
  @include make-row('no-gutters');
}

.example-col-2 {
  @include make-col-ready('no-gutters');
  @include make-col(2);
}

.example-col-10 {
  @include make-col-ready('no-gutters');
  @include make-col(10);
}