Mixin for Media Queries

index.html

<div class="foo">
  <div class="bar">Resize to view the media queries.</div>
</div>

Mixin for Media Queries.markdown

Mixin for Media Queries

A Pen by Andrew Houle on CodePen.

License.

style.css

@mixin bp($point) {
  @if $point == xl { // 1050px
    @media (max-width: 65.625rem) { @content; }
  }
  @else if $point == lg { // 900px
    @media (max-width: 56.25rem) { @content; }
  }
  @else if $point == md { // 768px
    @media (max-width: 48rem)  { @content; }
  }
  @else if $point == sm { // 600px
    @media (max-width: 37.5rem)  { @content; }
  }
  @else if $point == xs { // 400px
    @media (max-width: 25rem)  { @content; }
  }
}
.foo {
  height: 100%;
  width: 100%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  @include bp(xl) {
    background: blue;
  }
  @include bp(lg) {
    background: orange;
  }
  @include bp(md) {
    background: green;
  }
  @include bp(sm) {
    background: purple;
  }
  @include bp(xs) {
    background: brown;
  }
}
.bar {
  font-family: helvetica, sans-serif;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 30px;
}