CodePen

HTML

            
              <div id="test"></div>
            
          
!
via HTML Inspector

CSS

            
              @mixin breakpoint($point) {
  @if $point == break-small {
    @media only screen and (max-width: 320px) { @content; }
  }
  @else if $point == break-large {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

#test {
  float: left;
  width: 250px;
  height: 250px;
  background-color: black;
  @include breakpoint(break-small) {
    width: 100px;
    background-color: red;
  }
  @include breakpoint(break-large) {
    background-color: yellow;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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