Responsive mixin for easy media queries

respond_to.sass

// define breakpoints
$small:  #{"screen and (max-width: 479px)"}
$medium: #{"screen and (min-width: 480px) and (max-width: 767px)"}
$large:  #{"screen and (min-width: 768px)"}

// define mixin
=respond-to($media...)
  $media-list: null
  @each $query in $media
    $media-list: append($media-list, unquote("#{$query}"), comma)
  @media #{$media-list}
    @content
    
// profit!
.selector
  +respond-to($small)
    color: rebeccapurple
  +respond-to($medium, $large)
    color: blanchedalmond