// ————————————– // // tools.mediaqueries // www.sitepoint.com/managing-responsive-breakpoints-sass/ // // ————————————–

$breakpoints: (“small”: “(max-width: 520px)”, “medium”: “(min-width: 521px)”, “large”: “(min-width: 920px)”, “xlarge”: “(min-width: 1220px)”, “large-shorter”: “(min-width: 920px) and ( max-height: 600px)”)

// —————————————————————— // @mixin media-query // call and create all the breakpoints definine on the map $breakpoints // ——————————————————————

media-query($name, $push: false)

// If the key exists in the map
@if map-has-key($breakpoints, $name)
  // Prints a media query based on the value
  @media #{map-get($breakpoints, $name)}
    @content
@else if $push != false
  // Add the new breakpoint to the map
  $breakpoints: map-merge($breakpoints, ($name: $push)) !global
  // And re-call the mixin normally
  +media-query($name)
    @content
@else
  // Just warn the user
  @warn "Unfortunately, no value could be retrieved from `#{$name}`. " + "Please make sure it is defined in `$breakpoints` map. " + "Or pass the media query as a second parameter to add it to the map."

// —————————————————————— // @mixin respond-to // this mixin allow us to call several media-queries at once // // USAGE // .searchform // +respond-to(screen-xs, screen-sm) // padding-left: 0 // ——————————————————————

respond-to($media…)

@each $mediatype in $media
  +media-query($mediatype)
    @content