CodePen

HTML

            
              <header>
  <h1>a simple media query mixin</h1>
</header>

<section class="an-item">
  <p>A simple mixin that allows you to create a media query defining the width or height in a PX value it then computes it to EMs.</p>
  <p>You can specify min or max (defaulted as min) and width or height (defaulted as width) media queries by using the variables available.</p>
  <p>There's also the ability to create a .lt-ie9 suffix of the class/ID for IE8 and older</p>
  <p>This is the mixin - </p>
  <pre>
    <code>
@mixin mq($point, $IE9: false, $query1: min, $query2: width) {
    // if true then give an IE conditional class 'fallback' for oldIE
    @if $IE9 == true{
        .lt-ie9 & {
            @content;
        }
    }
    // else (need to use the word false, if changing $query1/2)
    @media (#{$query1}-#{$query2}: $point / $doc-font-size +em) {
        @content;
    }
}
    </code>
  </pre>
  <article>
    <h2>A simple min-width media query</h2>
    <p>So your media query you'd write in SCSS would be - </p>
    <pre>
      <code>
.example {
  @include mq(320) {
    width: 100%;
  }
}
      </code>
    </pre>
    <p>Which would result in - </p>
    <pre>
      <code>
@media screen and (min-width: 20em) {
  .example {
    width: 100%;
  }
}
      </code>  
    </pre>
  </article>
</section>

<aside>
  <h2>some notes</h2>
  <p>This is just my little SCSS mixin that I use. You may find it limiting for your requirements. If that's the case then I suggest looking at <a href="http://www.twitter.com/codingdesigner">Mason's</a> Compass plug in - <a href="http://www.breakpoint-sass.com">Breakpoint</a> for more advanced goodness.</p>
</aside>


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              p {
  width: 40em;  
}

section {
  padding: 1rem 3%;
  p {
    color: white !important; /* just for this demo */
  }
  code {
    color: black;
  }
}
article {
  background: lighten(#000, 25%);
  padding: 1rem 2%;
}
aside {
  padding: 1rem 3%;
  width: 100%;
  background: lighten(#000, 30%);
}

// initial variables set-up
// --------------------------

$doc-font-size: 16;
$doc-line-height: 24;

// major-breakpoints
// -----------------------------------------
//
//   These can be defined to what you like
//
// -----------------------------------------

$mobile: 320;
$tablet: 760;
$desktop: 900;

// media query mixin
// -------------------

@mixin mq($point, $IE9: false, $query1: min, $query2: width) {
    // if true then give an IE conditional class 'fallback' for oldIE
    @if $IE9 == true{
        .lt-ie9 & {
            @content;
        }
    }
     // else (need to use the word false, if changing $query1/2)
    @media (#{$query1}-#{$query2}: $point / $doc-font-size +em) {
        @content;
    }
}


.an-item {
  background: darken(#d13400, 20%);
  color: white !important; /* just for this demo */
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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