npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@financial-times/sass-mq

v5.2.4

Published

mq() is a Sass mixin that helps manipulating media queries in an elegant way.

Downloads

15,154

Readme

Hello

This is an internal fork of sass-mq which makes use of @financial-times/math to remove some sass warnings which happen due to sass-mw using the / operator which is deprecated.

When sass-mq version 6 is out, we can stop using our internal fork and move to that 👍

Media Queries with superpowers Build Status

mq() is a Sass mixin that helps you compose media queries in an elegant way.

Here is a very basic example:

$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
);

@import 'mq';

.foo {
    @include mq($from: mobile, $until: tablet) {
        background: red;
    }
    @include mq($from: tablet) {
        background: green;
    }
}

Compiles to:

@media (min-width: 20em) and (max-width: 46.24em) {
  .foo {
    background: red;
  }
}
@media (min-width: 46.25em) {
  .foo {
    background: green;
  }
}

Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: see who uses Sass MQ.

How to use it

Immediately play with it on SassMeister: @import 'mq';.

OR:

  1. Install:

    OR Download _mq.scss into your Sass project.

  2. Import the partial in your Sass files and override default settings with your own preferences before the file is imported:

    // To enable support for browsers that do not support @media queries,
    // (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
    // Create a separate stylesheet served exclusively to these browsers,
    // meaning @media queries will be rasterized, relying on the cascade itself
    $mq-responsive: true;
    
    // Name your breakpoints in a way that creates a ubiquitous language
    // across team members. It will improve communication between
    // stakeholders, designers, developers, and testers.
    $mq-breakpoints: (
        mobile:  320px,
        tablet:  740px,
        desktop: 980px,
        wide:    1300px,
    
        // Tweakpoints
        desktopAd: 810px,
        mobileLandscape: 480px
    );
    
    // Define the breakpoint from the $mq-breakpoints list that should
    // be used as the target width when outputting a static stylesheet
    // (when $mq-responsive is set to 'false').
    $mq-static-breakpoint: desktop;
    
    // If you want to display the currently active breakpoint in the top
    // right corner of your site during development, add the breakpoints
    // to this list, ordered by width. For example: (mobile, tablet, desktop).
    $mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
    
    // If _mq.scss is in your project:
    @import 'path/to/mq';
    // With eyeglass:
    @import 'sass-mq';
    // With webpack (and boilerplates such as create-react-app)
    @import '~sass-mq';
  3. Play around with mq() (see below)

Responsive mode ON (default)

mq() takes up to three optional parameters:

  • $from: inclusive min-width boundary
  • $until: exclusive max-width boundary
  • $and: additional custom directives

Note that $until as a keyword is a hard limit i.e. it's breakpoint - 1.

.responsive {
    // Apply styling to mobile and upwards
    @include mq($from: mobile) {
        color: red;
    }
    // Apply styling up to devices smaller than tablets (exclude tablets)
    @include mq($until: tablet) {
        color: blue;
    }
    // Same thing, in landscape orientation
    @include mq($until: tablet, $and: '(orientation: landscape)') {
        color: hotpink;
    }
    // Apply styling to tablets up to desktop (exclude desktop)
    @include mq(tablet, desktop) {
        color: green;
    }
}

Responsive mode OFF

To enable support for browsers that do not support @media queries, (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive: false.

Tip: create a separate stylesheet served exclusively to these browsers, for example with conditional comments.

When @media queries are rasterized, browsers rely on the cascade itself. Learn more about this technique on Jake’s blog.

To avoid rasterizing styles intended for displays larger than what those older browsers typically run on, set $mq-static-breakpoint to match a breakpoint from the $mq-breakpoints list. The default is desktop.

The static output will only include @media queries that start at or span this breakpoint and which have no custom $and directives:

$mq-responsive:        false;
$mq-static-breakpoint: desktop;

.static {
    // Queries that span or start at desktop are compiled:
    @include mq($from: mobile) {
        color: lawngreen;
    }
    @include mq(tablet, wide) {
        color: seagreen;
    }
    @include mq($from: desktop) {
        color: forestgreen;
    }

    // But these queries won’t be compiled:
    @include mq($until: tablet) {
        color: indianred;
    }
    @include mq($until: tablet, $and: '(orientation: landscape)') {
        color: crimson;
    }
    @include mq(mobile, desktop) {
        color: firebrick;
    }
}

Verbose and shortand notations

Sometimes you’ll want to be extra verbose (for example, if you’re developing a library based on top of sass-mq), however for readability in a codebase, the shorthand notation is recommended.

All of these examples output the exact same thing, and are here for reference so you can use the notation that best matches your needs:

// Verbose
@include mq(
    $from: false,
    $until: desktop,
    $and: false,
    $media-type: $mq-media-type // defaults to 'all'
) {
    .foo {}
}

// Omitting argument names
@include mq(
    false,
    desktop,
    false,
    $mq-media-type
) {
    .foo {}
}

// Omitting tailing arguments
@include mq(false, desktop) {
    .foo {}
}

// Recommended
@include mq($until: desktop) {
    .foo {}
}

See the detailed API documentation

Adding custom breakpoints

@include mq-add-breakpoint(tvscreen, 1920px);

.hide-on-tv {
    @include mq(tvscreen) {
        display: none;
    }
}

Seeing the currently active breakpoint

While developing, it can be nice to always know which breakpoint is active. To achieve this, set the $mq-show-breakpoints variable to be a list of the breakpoints you want to debug, ordered by width. The name of the active breakpoint and its pixel and em values will then be shown in the top right corner of the viewport.

// Adapt the list to include breakpoint names from your project
$mq-show-breakpoints: (phone, phablet, tablet);

$mq-show-breakpoints

Changing media type

If you want to specify a media type, for example to output styles for screens only, set $mq-media-type:

SCSS

$mq-media-type: screen;

.screen-only-element {
    @include mq(mobile) {
        width: 300px;
    }
}

CSS output

@media screen and (max-width: 19.99em) {
    .screen-only-element {
        width: 300px;
    }
}

Running tests

npm test

Generating the documentation

Sass MQ is documented using SassDoc.

Generate the documentation locally:

sassdoc .

Generate & deploy the documentation to http://sass-mq.github.io/sass-mq/:

npm run sassdoc

Inspired By…

On Mobile-first CSS With Legacy Browser Support

Who uses Sass MQ?

Sass MQ was developed in-house at the Guardian.

These companies and projects use Sass MQ:


Looking for a more advanced sass-mq, with support for height and other niceties?
Give @mcaskill's fork of sass-mq a try.