SCSS Responsive Mixin

responsive_mixin.scss

// Shout out to YouTube channel "FrontDev" for this mixin
// that makes responsive so much easier to work with. You can check out the full tutorial on
// his video here: https://www.youtube.com/watch?v=1334bFDilgk&ab_channel=FrontDev

// Put your breakpoints here
$available-breakpoints: (
    sm: 540px,
    md: 768px,
    lg: 1024px
);

// Change min with max if necessary
@mixin responsive($breakpoint) {
    @media screen and (min-width: map-get($available-breakpoints, $breakpoint)){
        @content
    }
}

// Usage
.container {
  background-color: pink;
  
  @include responsive(sm){
    background-color: blue;  
  }
}