Mobile-First SCSS Breakpoints Mixin

breakpoint-examples.scss

/* Breakpoint Mixin Examples
 *
 * SCSS example syntax for using the breakpoints mixin
 */

// Load Breakpoints Mixin
@import 'breakpoints';

.responsive {
  /* 0px and up */
  /* Mobile Styles */
  width: 100%;
  margin: 0 auto;

  @include breakpoints(large) {
    /* Named min-width value */
    /* 1025px and up */
    /* Ex: Desktop Styles */
    max-width: 60rem;
  }

  @include breakpoints(medium, large) {
    /* Named min-width and max-width values: */
    /* 641px - 1024px */
    /* Ex: Tablet Only Styles */
    display: flex;
    flex-flow: row wrap;
  }

  @include breakpoints(none, xx-large) {
    /* Named max-width value only: */
    /* Up to 2800px */
    /* Ex: Desktop & Mobile only */
    background-size: cover;
  }

  @include breakpoints(240px, 24rem) {
    /* Custom width values: */
    /* 241px - 24rem */
    /* Ex: Arbitary Mobile Screen Sizes */
    font-size: 1.125rem;
  }

  @include breakpoints(none, none, print) {
    /* Custom media type */
    /* Print displays only */
    /* Ex: Typography for Print */
    font-size: 12pt;
    line-height: 2;
  }
}

breakpoint-results.scss

/* Breakpoint Mixin Examples
 *
 * SCSS example syntax for using the breakpoints mixin
 */

.responsive {
  /* 0px and up */
  /* Mobile Styles */
  width: 100%;
  margin: 0 auto;
}

@media all and (min-width: 1025px) {
  .responsive {
    /* Named min-width value */
    /* 1025px and up */
    /* Ex: Desktop Styles */
    max-width: 60rem;
  }
}

@media all and (min-width: 641px) and (max-width: 1024px) {
  .responsive {
    /* Named min-width and max-width values: */
    /* 641px - 1024px */
    /* Ex: Tablet Only Styles */
    display: flex;
    flex-flow: row wrap;
  }
}

@media all and (max-width: 2800px) {
  .responsive {
    /* Named max-width value only: */
    /* Up to 2800px */
    /* Ex: Desktop & Mobile only */
    background-size: cover;
  }
}

@media all and (min-width: 241px) and (max-width: 24rem) {
  .responsive {
    /* Custom width values: */
    /* 241px - 24rem */
    /* Ex: Arbitary Mobile Screen Sizes */
    font-size: 1.125rem;
  }
}

@media print {
  .responsive {
    /* Custom media type */
    /* Print displays only */
    /* Ex: Typography for Print */
    font-size: 12pt;
    line-height: 2;
  }
}

breakpoints.scss

// Breakpoints Mixin
//
// Mobile first breakpoints mixin, for min-width, max-width and media types.
// Includes a $breakpoints map of named viewport width size values.
//
// @param {string|number} $from - Named breakpoint or width value for min-width
// @param {string|number} $to - Named breakpoint or width value for max-width
// @param {string} $media - Media query type value, https://www.w3.org/TR/mediaqueries-4/#media-types

// Named Breakpoint Values
$breakpoints: (
  small: 320px,
  medium: 640px,
  large: 1024px,
  x-large: 1600px,
  xx-large: 2800px,
);

// SCSS Breakpoint shortcut mixin
@mixin breakpoints($from: none, $to: none, $media: all) {
  // Set some empty min + max values
  $min-width: null;
  $max-width: null;

  // Determine 'from' min-width value
  @if (type-of($from) == string) and (map-has-key($breakpoints, $from)) {
    // If value is a string listed in the named breakpoints map
    $min-width: map-get($breakpoints, $from);
  }
  @else if ((type-of($from) == number) and (unitless($from) == false)) {
    // If value is a number with a unit
    $min-width: $from;
  }
  @else if ($from == none) {
    // If the value is blank
    $min-width: false;
  }
  @else {
    // If none are true, display compile error
    @error '`breakpoints()` min-width value `#{$from}` was not found.';
  }

  // Determine 'to' max-width value
  @if (type-of($to) == string) and (map-has-key($breakpoints, $to)) {
    // If value is a string listed in the named breakpoints map
    $max-width: map-get($breakpoints, $to);
  }
  @else if ((type-of($to) == number) and (unitless($to) == false)) {
    // If value is a number with a unit
    $max-width: $to;
  }
  @else if ($to == none) {
    // If the value is blank
    $max-width: false;
  }
  @else {
    // If none are true, display compile error
    @error '`breakpoints()` max-width value `#{$to}` was not found.';
  }

  // If both min-width & max-width values:
  @if ($min-width != false) AND ($max-width != false) {
    // Increment min-width value by 1px
    $min-width: $min-width + 1px;
    @media #{$media} and (min-width: #{$min-width}) and (max-width: #{$max-width}) {
      // breakpoint mixin content:
      @content;
    }
  }
  // If only the min-width value is set:
  @else if ($min-width != false) {
    // Increment min-width value by 1px
    $min-width: $min-width + 1px;
    @media #{$media} and (min-width: #{$min-width}) {
      // breakpoint mixin content:
      @content;
    }
  }
  // If only the max-width value is set:
  @else if ($max-width != false) {
    @media #{$media} and (max-width: #{$max-width}) {
      // breakpoint mixin content:
      @content;
    }
  }
  // If min-width & max-width are empty, but special media type set:
  @else if ($media != all) {
    @media #{$media} {
      // breakpoint mixin content:
      @content;
    }
  }
  // If no custom media query values are set:
  @else {
    // Thanks for playing
    @content;
  }
}