breakpoint macros (Sass)

breakpoint.sass

// =below($size)
//   @media only screen and (max-width: $size)
//     @content

// =above($size)
//   @media only screen and (min-width: $size)
//     @content

// =lower($size)
//   @media only screen and (max-height: $size)
//     @content

// =higher($size)
//   @media only screen and (min-height: $size)
//     @content

$breakpoints: ("xs": 480px, "m": 768px, "l": 960px, "xl": 1200px)

=below($breakpoint)
  $value: map-get($breakpoints, $breakpoint)
  // if key exists in map, print media query, otherwise check for valid unit value
  @if $value != null
    @media (max-width: $value)
      @content
  @else if (not unitless($breakpoint))
    @media (max-width: $breakpoint)
      @content
  @else
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map."

=above($breakpoint)
  $value: map-get($breakpoints, $breakpoint)
  // if key exists in map, print media query, otherwise check for valid unit value
  @if $value != null
    @media (max-width: $value+1)
      @content
  @else if (not unitless($breakpoint))
    @media (min-width: $breakpoint+1)
      @content
  @else
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map."

// For each key in the map, created an own class
@each $name, $value in $breakpoints
  .hide-#{$name}
    +below($name)
        display: none !important  //we mean it. no override by some coincidental precedence
  .show-#{$name}
    +below($name)
        display: block !important
  .show-inline-#{$name}
    +below($name)
        display: inline !important

.test1
  background: yellow
  +below(xs)
    background: orange
  +below(700px)
    background: purple
  +above(xl)
    background: green
  +above(999px)
    background: darkgreen

demonstration-output.css

 /depot/own/jekyll/_sass $ sass breakpoint.sass breakpoint.css && cat breakpoint.css
@media (max-width: 480px) {
  .hide-xs {
    display: none !important; } }

@media (max-width: 480px) {
  .show-xs {
    display: block !important; } }

@media (max-width: 480px) {
  .show-inline-xs {
    display: inline !important; } }

@media (max-width: 768px) {
  .hide-m {
    display: none !important; } }

@media (max-width: 768px) {
  .show-m {
    display: block !important; } }

@media (max-width: 768px) {
  .show-inline-m {
    display: inline !important; } }

@media (max-width: 960px) {
  .hide-l {
    display: none !important; } }

@media (max-width: 960px) {
  .show-l {
    display: block !important; } }

@media (max-width: 960px) {
  .show-inline-l {
    display: inline !important; } }

@media (max-width: 1200px) {
  .hide-xl {
    display: none !important; } }

@media (max-width: 1200px) {
  .show-xl {
    display: block !important; } }

@media (max-width: 1200px) {
  .show-inline-xl {
    display: inline !important; } }

.test1 {
  background: yellow; }
  @media (max-width: 480px) {
    .test1 {
      background: orange; } }
  @media (max-width: 700px) {
    .test1 {
      background: purple; } }
  @media (max-width: 1201px) {
    .test1 {
      background: green; } }
  @media (min-width: 1000px) {
    .test1 {
      background: darkgreen; } }