CodePen

HTML

            
              <div class='mq-test'>
</div>
            
          
!

CSS

            
              // Define some screen sizes for media queries
$phone:        320px;
$phone-wide:   500px;
$tablet:       600px;
$large-screen: 992px;

@mixin at-least($device-width) {
  @media screen and (min-width: $device-width) {
    @content 
  }
}

@mixin until($device-width) {
  @media screen and (max-width: $device-width - 1) {
    @content 
  }
}

.mq-test {
  color: #fff;
  text-shadow: #000 0 1px 1px;
  font-family: Helvetica, Arial, sans;
  text-align: center;
  &:before, &:after { display: block; padding: .5em; }
  @include transition(all .3s ease-in-out);
  
  /*
  /* USING AT-LEAST
  */

  background: #aaa;
  @include at-least($phone) {
    background: orange;
    &:before { content: "screen is >= #{$phone}"; }
  }
  
  @include at-least($phone-wide) {
    background: green;
    &:before { content: "screen is >= #{$phone-wide}"; }
  }
  
  @include at-least($tablet) {
    background: red;
    &:before { content: "screen is >= #{$tablet}"; }
  }
  @include at-least($large-screen) {
    background: blue;
    &:before { content: "screen is >= #{$large-screen}"; }
  }
  
  /*
  /* USING UNTIL
  */
  
  margin: 25px auto;
  @include until($tablet){
    margin: 0 auto;
    &:after { content: "screen is < #{$tablet}"; }
  }
  
  width: 200px; height: 100px;
  @include until($phone-wide){
    width: 100px; height: 200px;
    &:after { content: "screen is < #{$phone-wide}"; }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................