SaaS Mixin for mobile-first responsive styling

_mixins.scss

With Bootstrap 4 values:

@mixin breakpoint($point) {
  @if $point == sm {
    @media (min-width: 576px) { @content; }
  }
  @if $point == md {
    @media (min-width: 768px) { @content; }
  }
  @else if $point == lg {
    @media (min-width: 992px)  { @content; }
  }
  @else if $point == xl {
    @media (min-width: 1200px)  { @content; }
  }
}

With Bootstrap 3 values:

@mixin breakpoint($point) {
  @if $point == sm {
    @media (min-width: 768px) { @content; }
  }
  @if $point == md {
    @media (min-width: 992px) { @content; }
  }
  @else if $point == lg {
    @media (min-width: 1200px)  { @content; }
  }
  @else if $point == xl {
    @media (min-width: 1500px)  { @content; }
  }
}

Use this like this:

.someClass {
    font-size:20px;
    @include breakpoint(md) {
        font-size:30px;
    }
}

This will make all font sizes 20px for .someClass up to (but not including) the breakpoint defined as md. Once the width of the browser reaches or exceeds the md breakpoint size, the font size for .someClass will be 30px;

This is a mobile-first approach meaning you are overriding smaller viewport sizes, not larger ones. This approach is preferred because mobile layouts are generally usable on desktops but not vise-versa. It is also desired not to include additional mixins like the Neat Grid and others provide which allow "exactly at" or desktop-first approaches in addition to mobile first because it promotes inconsistency across team members.

This technique also groups styling for various sizes together so you are not constantly scrolling around to style a specific element.