// Media Queries // 1. Name and define our breakpoints. Name the map something sensical // 2. Write a comma separated list of key: value, pairs that we will use later $breakpoints: (  small: 34em,  large: 60em, );
 // if selector is wider than the screensize we are calling @mixin bp($screen-size) {
 // and if our map that we named $breakpoints includes values (we called them $screen-size)  @if map-has-key($breakpoints, $screen-size) {
 // then write out a nested Media Query that will target that value as our min-width  @media (min-width: map-get($breakpoints, $screen-size)) {
 // write CSS within this mixin that would apply to only this breakpoint or above  @content;
}
 // if the screen-size we are requesting doesn't exist, then tell me when it is compiled
}
@else {
 // Debugging  @warn "'#{$screen-size}' has not been declared as a breakpoint.";
}
}