2-mixins-and-functions edit

Breakpoint function
Creates @media css from specified breakpoints
Usage:

.class {
  @include breakpoint($mobile-to-desktop-breakpoint) {
    display: block;
  }
}
outputs:
@media (min-width: 930px) {
  .class {
    display: block;
  }
}

or create a one-time use breakpoint:
.class {
  @include breakpoint(1200px, max) {
    display: block;
  }
}
Go to breakpoint variables and breakpoint map

/* scss/2-mixins-and-functions/_mixin-breakpoints.scss */

// BREAKPOINT MIXIN USAGE
// Outputs breakpoint for specified width
// can be used anywhere, not just at the bottom of the page
//
// use breakpoints from the map in 3-variables/_wm-breakpoints.scss
// map of breakpoints and breakpoint variables are in 3-variables/_wm-colors.scss
//
// default is min but can add max as second parameter
//
// .class {
//   @include breakpoint($mobile-to-desktop-breakpoint) {
//       display: block;
//   }
// }
// outputs:
// @media (min-width: 930px) {
//   .class {
//       display: block;
//   }
// }
//
// or create a one-time use breakpoint:
// .class {
//   @include breakpoint(1200px, max) {
//       display: block;
//   }
// }
// https://rimdev.io/making-media-query-mixins-with-sass/

@mixin breakpoint($breakpoint, $direction: min) {
  @if map-has-key($breakpoints, $breakpoint) {
    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    @if $direction == max {
      @media (max-width: ($breakpoint-value - 1)) {
        @content;
      }
    } @else if $direction == min {
      @media (min-width: $breakpoint-value) {
        @content;
      }
    } @else {
      @media ($direction: $breakpoint-value) {
        @content;
      }
    }

    // If the breakpoint doesn't exist in the map.
  } @else {
    @if $direction == max {
      @media (max-width: $breakpoint) {
        @content;
      }
    } @else if $direction == min {
      @media (min-width: $breakpoint) {
        @content;
      }
    } @else {
      @media ($direction: $breakpoint) {
        @content;
      }
    }
  }
}

@function breakpoint($breakpoint) {
  // Get the breakpoint value.
  $breakpoint-value: map-get($breakpoints, $breakpoint);
  @return $breakpoint-value;
}