Create Simple Inline Media Queries with include-media

Stacy Kvernmo

10 years ago

Lately, I’ve been thinking that our current method of using inline media queries throughout our Sass partials has not been flexible enough for the projects we’ve been building. While it was simple and allowed for easy implementation, I think it is time to try yet another Sass library–specifically include-media.

Eduardo Bouças, developer of include-media, states on the website:

“include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.”

Simple, Natural Syntax

While there are many libraries out there to choose from, I really enjoy the syntax used by include-media. When writing code, it is always helpful to be able to translate what you are writing to your native language (in your head, of course).

Operators, FTW

I love using the operators as it is so simple to see what is taking place. Many media query libraries do not take into account the max value of the smaller breakpoint and the minimum value of the larger one, which means both media queries will be active at that same time potentially causing conflict. Having the ability to use the >= (greater than or equal to) or <= (less than or equal to) is very exciting.

BYOB

Bring your own Breakpoint names and values! By default, include-media will help you get started with the following:

$breakpoints: (
    phone: 320px,
    tablet: 768px,
    desktop: 1024px
);

I recommend that you redeclare these breakpoints based on when your content actually needs a breakpoint. You can also use your own naming conventions as well if device name is not your thing. To redefine your breakpoints, use the same Sass Map syntax. include-media can accept px, em or rem units:

$breakpoints: (
    phone: 24em,
    tablet: 50em,
    desktop: 72em
);

Now let’s put these babies to use:

.primary {
     // look at me, I’m mobile first and full width
    width: 100%;    

    // then when I reach a point where my main content area may be too wide
    // we can now call in our breakpoint
    @include media(">phone", "<=tablet") {
        width: 35%;
    }
}

How simple is that? I love speakable code.

Custom Values

Do you need an on-the-go breakpoint for those one-off situations? I am in favor of making variables for as many values as possible, but if that is your style this is for you:

@include media(">desktop", "<=2600px") {
    content: 'Why is your browser so wide?';
}

Supports Media Types and Static Expressions

You can target media types screen, print, handheld the same way you’d target a size:

.primary {
    content: 'screens are awesome';

    @include media("print") {
        content: 'people print websites?';
    }
}

Or target retina screens:

.primary {
    // I’m a regular sized logo
    background-image: url(images/logo.png);

    // I’m a SUPER logo for pretty retina screens
    @include media("retina2x") { 
        background-image: url(images/logo@2x.png);    
    }
}

Couple of Caveats

include-media may not work as expected if you are using other libraries that have a mixin named ‘media’, like Bourbon Neat.
I really would love the ability to target height as well and that may be a feature that is currently being developed.

Give it a Try

To get started, you can either download the single scss file and @import it to your project manually or you can install via Bower:

bower install include-media

and import dist/_include-media.scss into your project.