Really simple media queries in Sass

  • By @import
  • Last update: Jan 2, 2023
  • Comments: 16

Breakpoint Gem Version Build Status

Really Simple Media Queries with Sass

Breakpoint makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

Breakpoint also allows you to get the context of your media queries from your code, allowing you to write dynamic mixins based on their media query context.

If you'd prefer the semantic awesomeness of string names to identify your queries as opposed to variables, or want to dynamically generate media queries, the Respond-To syntax is now included in Breakpoint core!

It is important to note that due to limitations within the Sass language itself, which themselves stem from some potentially unexpected cascading from doing so, Breakpoint is unable to concat like media queries into a single media query. This means they will be spread out throughout your CSS. This is unfortunate, yes, but currently unavoidable. That being said, once Sass Issue #241: Seperate Media/Browser Specific Markup to Separate Style Sheet hits, be sure we're going to take full advantage of it.

Full documentation is available on the Breakpoint Wiki

Getting Help with Breakpoint

  • For help with Breakpoint, please ask a question on Stack Overflow tagged with "breakpoint-sass".
  • To file an issue with Breakpoint, be it a feature request or a bug report, please use our Issue Queue.
  • Each Separate Bug Report or Feature Request Must Have Its Own Issue
  • Search in both active issues and closed issues before filing your own. If one already exists, please respond there.
  • If you are in IRC, the maintainers and many fellow users tend to hang out in the #sass and #compass rooms on Asking in there may get you a quick answer to your question, but we still encourage you to file your inquiry in the appropriate place above to

Contributing to Breakpoint

We love contributors! Yes we do! If you would like to contribute to Breakpoint, please follow the Contributing Guidelines

Awesome Things Built With Breakpoint

Breakpoint is designed to be a Media Query engine to power everything from design tweaks to media query contexts to full media query fallbacks. But we also know that our users will build awesome thing with these tools. Build a Breakpoint powered mixin for new media query semantics? We want to hear about it! Build something cool with Context? Let us know! If you would like to add your Awesome Thing to the list, please issue a Pull Request to add it!


Licensed under MIT/GPL.

GPL2 license:

MIT license:



  • 1

    Breakpoint Version 2

    After some discussion and percolation I think we have the major features and workflow of Breakpoint 2.0 worked out.

    Breakpoint 2

    Breakpoint 2 will add full media query handling, including only, not, and or operators, along with making working with breakpoint variables simpler and more robust.

    Example breakpoint variables:

    // A normal example:
    $mq: screen 'and' min-width 30em;
    // An intense example:
    $mq: only screen 'and' width 20em 35em 'and' monochrome 
            'and' max-height 20em, print;

    Feature list types

    • All original breakpoint combinations:
      • 500px // default-feature-value
      • min-height 500px // feature value
      • width 20em 30em // feature min-value max-value
    • Media type, with optional not or only operators.
      • screen // media-type
      • 'only' screen // operator media-type
    • No-query is now treated like any other breakpoint feature list:
      • no-query '.nq' // no-query-flag selector

    And and Or operators

    In V2, and operators will use the keyword 'and', while or operators will use a comma.

    Prefixed features

    To be decided. Maybe keyword handling, maybe array handling, although both have unique complexity issues.

    Combination of multiple breakpoint variables

    The following should be possible:

    $medium: 20em;
    $max-medium: max-width 35em 
    $medium-scoped: $medium 'and' $max-medium;
    $low-color: monotone;
    @include breakpoint($medium-scoped 'and' $low-color)  {

    Variable arguments

    By switching to keywords and internal handling instead of separate arguments, we can use variable arguments in the mixin and streamline ux.


    Now that we are allowing or media queries, context will have to return a list, sorted from smallest to largest value.

    @include breakpoint(500px 200px 'and' resolution 2dppx) {
      // bp_context(min-width) == (200px, 500px).


    We should throw warnings on some possible user errors:

    • More than one media type in an and query
    • More than one instance of a feature in an and query

    Thoughts, problems, suggestions? @Snugug, want to make a canonical v2 branch and divide some of these features to work on?

  • 2

    breakpoint-to-base-em() function doesn't convert ems

    Since breakpoints happen in base ems, but layouts happen in local ems, this function should be able to convert em-values as well. That requires a font-size argument. This function is otherwise identical to Susy's. Why was the font-size conversion removed?

  • 3

    compile error

    At the first run of breakpoint I'm getting the following error:

     Invalid CSS after "  @media ": expected "{", was "#{$query} {"

    I'm compiling with Codekit with breakpoint installed as a partial.

  • 4

    Breakpoint without Compass

    Anychance that someone could help with this issue here: about getting Breakpoint to work without Compass?

    Thanks, Neil

  • 5

    No query stored in breakpoint variable

    I have previously written my own mixins for breakpoints and had a similar solution for no query support where I would pass true or false to the mixin and that would decide whether or not that content was in included in the no-query/old-ie stylesheet.

    I have got this mostly working with breakpoint, except there doesn't seem to be a way to store the $no-query variable in a breakpoint variable.


    $gte-medium: 35em, all, true

    That way I don't need to continuously write:

    @include breakpoint($gte-medium, $no-query: true)

    every time I have something at the medium breakpoint I can just write:

    @include breakpoint($gte-medium)

    It allows me to set all my breakpoints(with no query specificity) in my settings file incase I decide to change it or when I am working with other developers that don't know what styles should go to old ie etc they can just use the default breakpoint variables without worrying about it.

    Is this possible at the moment? Am I missing something?

    Thanks, Luke

  • 6

    Implement the ability to generate an IE only stylesheet

    When adopting a mobile-first approach, it is important to provide desktop styles to old versions of IE that do not support media queries. This has previously been achieved without @media bubbling in Sass. Please read this article by Jake Archibald, in which he demonstrates a new method that allows the creation of an IE only stylesheet whilst simultaneously using @media bubbling.

    This commit adopts this method, but rather than using the variable name of $fix-mqs, it instead uses $fix-breakpoint. I'm not completely familiar with the ins and outs of the Breakpoint library, but I have tried my best to incorporate here.

  • 7

    Breakpoint Get Context 2.x

    Breakpoint Get Context for 2.x.x gets more complicated with the addition of built-in 'or' query support. As a developer, I'd like the following returned to me from a breakpoint get context query:

    $bkpt: 300px, ('min-height' 600px) (orientation landscape), 'min-height' 900px;
    #foo {
      @include breakpoint($bkpt) {
        $min-width: breakpoint-get-context('min-width');
        $min-height: breakpoint-get-context('min-height');
        $orientation: breakpoint-get-context('orientation');
        @debug $min-width;
        @debug $min-height;
        @debug $orientation;
    min-width: 300px, false, false
    min-height: false, 600px, 900px
    orientation: false, landscape, false

    I would be okay with trailing falses no being present, but would like to see a companion function to make all lists the same length, padded with false. I would like this because I need to be able to have all of my lists the same length to programmatically work with them and ensure that ors properly line up with their functionality.

  • 8

    Query return without first argument

    When writing @include breakpoint(800px), breakpoint returns @media and (min-width: 800px)

    I presume this may be a compiler issue, because I have used Breakpoint in another project where I was compiling with Codekit (and it worked). This time I’m compiling with Gulp (gulp-sass).

    I have Sass 3.3.4 installed.


  • 9

    Updated min/max, DX improvement to feature/value

    Updated the min/max functionality to be able to be used with any valid value, not just min-width. Also added in handling for prefixing device-pixel-ratio media query. Also added ability for single feature/value pairs to be written with feature first or second. Finally, converted from Sass to SCSS.

    .foo {
      @include breakpoint(300px 400px) {
        content: 'foo';
    .bar {
      @include breakpoint(300px 400px 'height') {
        content: 'bar';
    .baz {
      @include breakpoint(1 1.5 'device-pixel-ratio') {
        content: 'baz';


    @media screen and (min-width: 300px) and (max-width: 400px) {
      .foo {
        content: 'foo';
    @media screen and (min-height: 300px) and (max-height: 400px) {
      .bar {
        content: 'bar';
    @media screen and (min-device-pixel-ratio: 1) and (max-device-pixel-ratio: 1.5) {
      .baz {
        content: 'baz';
    @media screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.5) {
      .baz {
        content: 'baz';
    @media screen and (min--moz-device-pixel-ratio: 1) and (max--moz-device-pixel-ratio: 1.5) {
      .baz {
        content: 'baz';
    @media screen and (-o-min-device-pixel-ratio: 1/1) and (-o-max-device-pixel-ratio: 3/2) {
      .baz {
        content: 'baz';

    TODO: Need to be able to write min/max in either order, but that can be written off to API constraints.

  • 10

    Line 47 of app/public/bower/breakpoint-sass/_breakpoint.scss: Invalid CSS after "...ntext holder') ": expected "}", was "!global;"

    Why am I getting this error?

    line 47 looks like this:

    $private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;

    full stack trace has been concatenated I'm afraid. might be able to get something. Is !global valid?

  • 11

    Remove compass dependency?

    I see that Compass is not required for compiling breakpoint's CSS.

    Would it be acceptable to remove the gem dependency on Compass, using Compass::Frameworks.register if compass is available, falling back to Sass.load_paths? An example implementation is in bootstrap-sass:

  • 12

    Are Level 4 Media Queries supported???

    Media Queries Level 4

    @media (hover: none) { // look mom! i might be a touch device }

    how would I write the query above in the current form?

    when i do

    @import breakpoint($phone) { }

    and $phone: (hover none); or hover: 'none' or etc etc down the list, nothing is currently working....

  • 13

    can't override default variables

    In Breakpoint 2.6 you changed die default variables from sass-variables to a sass-map called $breakpoint-settings. it is very difficult to override sass map variables (only with a roudtrip), see: for example: $breakpoint-no-query-fallbacks: true; or $breakpoint-to-ems: true; is not possible, the documentation is wrong and depracated please switch back to normal sass variables or provide an other way to override the default variables

  • 14

    eyeglass usage notes

    Hey, first up, this thing is awesome. Thank you guys for creating it.

    Now, my question: could you could provide documentation for eyeglass usage somewhere, even something simple like what modularscale does:


    • Terminal: npm install modularscale-sass --save-dev
    • SCSS: @import 'modular-scale'

    (I'm just asking, because I spent 15-20 minutes poking around before I realized the @import name was just "breakpoint", not "breakpoint-sass".)

  • 15

    Can media queries be grouped in css?

    Already with this sass eg.:

    .foo {
      @include breakpoint($large) {
        color: #333;
    .bar {
      @include breakpoint($large) {
        display: none;

    compiles to css:

    @media (min-width: 1200px) {
      .foo {
        color: #333;
    @media (min-width: 1200px) {
      .bar {
        display: none;

    So - can it be grouped and compiled to:

    @media (min-width: 1200px) {
      .foo {
        color: #333;
      .bar {
        display: none;

    It saves some css file size.

  • 16

    Installation for breakpoint doesn't work

    I have followed the instructions for installing breakpoint only to get the following error when I try do do compass watch:

    Gem::ConflictError on line ["2285"] of C: Unable to activate breakpoint-2.4.6, because sass-3.4.23 conflicts with sass (~> 3.3.0)

    I also would like to use the alternate method of installing breakpoint using bower, but this line really should be fully written out rather than expecting everyone to understand what the heck it means:

    You are also going to need to add the folder using Compass's add_import_path config option instead of the standard require.

    What folder and where does add_import go?