Thesaurus

A Web Design & Development Blog

SASS MQs

Writing media queries with SASS can save you a lot of time and lines of code. Also, edits will be easy to implement.

First we set our global variables.

$i is the starting point, as i dont need media queries for 10 pixel screen. $x is our base em size.

$i: 20;
$x: 16;

For these queries we are setting a container class that will at maximum be 90% screen width, when the screen size is larger than 130% of the container the next query will fire. In other words, there will always be between 10% and 30% padding on the container.

Now lets start a while loop. The while loop will stop at 80em.

@while $i > 80 {
    $max: $i * 1.3;
    $container: $i * .9;
    @media (min-width: $i + em) {
        .container { max-width: $container + em; }
    }
    $i: $max;
}

Here is a basic example:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>