Sass Nested Media Queries

If you are using Sass, you are probably also at least playing with media queries and Responsive web design.

Have you tried nesting media queries in sass? Just nest your conditional styles in a media query, and Sass will output a normal media query for your responsive pleasure.

This is a great alternative to moving to a separate part of your file or switching files and finding the right place in your media query for your new rule.

Sass Nested Media Query Example:

#sidebar    {
    width: 100%;

    @media only screen and ( min-width: 480px; )    {
        width: 33.33333%;
        float: right;
    }
}

Becomes:

#sidebar    {
    width: 100%;
}

@media only screen and ( min-width: 480px; )    {
    #sidebar    {
        width: 33.33333%;
        float: right;
    }
}