{"id":18840095,"url":"https://github.com/seothemes/mqkit","last_synced_at":"2026-01-29T05:30:16.099Z","repository":{"id":53712767,"uuid":"151557060","full_name":"seothemes/mqkit","owner":"seothemes","description":"Sass mixin that helps you compose media queries in an elegant way.","archived":false,"fork":false,"pushed_at":"2020-04-15T15:39:24.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-30T10:47:46.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seothemes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-04T10:50:20.000Z","updated_at":"2020-09-25T05:35:12.000Z","dependencies_parsed_at":"2022-09-02T12:51:38.256Z","dependency_job_id":null,"html_url":"https://github.com/seothemes/mqkit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seothemes%2Fmqkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seothemes%2Fmqkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seothemes%2Fmqkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seothemes%2Fmqkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seothemes","download_url":"https://codeload.github.com/seothemes/mqkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239776246,"owners_count":19695068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T02:45:01.328Z","updated_at":"2026-01-29T05:30:16.032Z","avatar_url":"https://github.com/seothemes.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Media Queries with superpowers [![Build Status](https://api.travis-ci.org/sass-mq/sass-mq.svg?branch=master)](https://travis-ci.org/sass-mq/sass-mq)----\n\n`mq()` is a [Sass](http://sass-lang.com/ \"Sass - Syntactically Awesome\nStylesheets\") mixin that helps you compose media queries in an elegant\nway.\n\n- compiles keywords and `px`/`em` values to `em`-based queries ([a good thing](http://css-tricks.com/zooming-squishes))\n- provides fallbacks for older browsers (see [Mobile-first Responsive Web Design and IE8](http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8) on the Guardian's developer blog).\n\nHere is a very basic example:\n\n```scss\n$mq-breakpoints: (\n    mobile:  320px,\n    tablet:  740px,\n    desktop: 980px,\n    wide:    1300px\n);\n\n@import 'mq';\n\n.foo {\n    @include mq($from: mobile, $until: tablet) {\n        background: red;\n    }\n    @include mq($from: tablet) {\n        background: green;\n    }\n}\n```\n\nCompiles to:\n\n```css\n@media (min-width: 20em) and (max-width: 46.24em) {\n  .foo {\n    background: red;\n  }\n}\n@media (min-width: 46.25em) {\n  .foo {\n    background: green;\n  }\n}\n```\n\n_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](#who-uses-sass-mq)._\n\n----\n\n\n## How to use it\n\nImmediately play with it on [SassMeister](http://sassmeister.com/): `@import 'mq';`.\n\nOR:\n\n1. Install with [Bower](http://bower.io/ \"Bower: A package manager for the web\"): `bower install sass-mq --save`\n\n    OR Install with [npm](https://www.npmjs.com/): `npm install sass-mq --save` _it supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_\n\n    OR [Download _mq.scss](https://raw.github.com/sass-mq/sass-mq/master/_mq.scss) to your Sass project.\n\n2. Import the partial in your Sass files and override default settings\n   with your own preferences before the file is imported:\n    ```scss\n    // To enable support for browsers that do not support @media queries,\n    // (IE \u003c= 8, Firefox \u003c= 3, Opera \u003c= 9) set $mq-responsive to false\n    // Create a separate stylesheet served exclusively to these browsers,\n    // meaning @media queries will be rasterized, relying on the cascade itself\n    $mq-responsive: true;\n\n    // Name your breakpoints in a way that creates a ubiquitous language\n    // across team members. It will improve communication between\n    // stakeholders, designers, developers, and testers.\n    $mq-breakpoints: (\n        mobile:  320px,\n        tablet:  740px,\n        desktop: 980px,\n        wide:    1300px,\n\n        // Tweakpoints\n        desktopAd: 810px,\n        mobileLandscape: 480px\n    );\n\n    // Define the breakpoint from the $mq-breakpoints list that should\n    // be used as the target width when outputting a static stylesheet\n    // (i.e. when $mq-responsive is set to 'false').\n    $mq-static-breakpoint: desktop;\n\n    // If you want to display the currently active breakpoint in the top\n    // right corner of your site during development, add the breakpoints\n    // to this list, ordered by width, e.g. (mobile, tablet, desktop).\n    $mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);\n\n    @import 'path/to/mq';\n    // With eyeglass:\n    // @import 'sass-mq';\n    ```\n3. Play around with `mq()` (see below)\n\n### Responsive mode ON (default)\n\n`mq()` takes up to three optional parameters:\n\n- `$from`: _inclusive_ `min-width` boundary\n- `$until`: _exclusive_ `max-width` boundary\n- `$and`: additional custom directives\n\nNote that `$until` as a keyword is a hard limit i.e. it's breakpoint - 1.\n\n```scss\n.responsive {\n    // Apply styling to mobile and upwards\n    @include mq($from: mobile) {\n        color: red;\n    }\n    // Apply styling up to devices smaller than tablets (exclude tablets)\n    @include mq($until: tablet) {\n        color: blue;\n    }\n    // Same thing, in landscape orientation\n    @include mq($until: tablet, $and: '(orientation: landscape)') {\n        color: hotpink;\n    }\n    // Apply styling to tablets up to desktop (exclude desktop)\n    @include mq(tablet, desktop) {\n        color: green;\n    }\n}\n```\n\n### Responsive mode OFF\n\nTo enable support for browsers that do not support `@media` queries,\n(IE \u003c= 8, Firefox \u003c= 3, Opera \u003c= 9) set `$mq-responsive: false`.\n\nTip: create a separate stylesheet served exclusively to these browsers,\nfor example with conditional comments.\n\nWhen `@media` queries are rasterized, browsers rely on the cascade\nitself. Learn more about this technique on [Jake’s blog](http://jakearchibald.github.io/sass-ie/ \"IE-friendly mobile-first CSS with Sass 3.2\").\n\nTo avoid rasterizing styles intended for displays larger than what those\nolder browsers typically run on, set `$mq-static-breakpoint` to match\na breakpoint from the `$mq-breakpoints` list. The default is\n`desktop`.\n\nThe static output will only include `@media` queries that start at or\nspan this breakpoint and which have no custom `$and` directives:\n\n```scss\n$mq-responsive:        false;\n$mq-static-breakpoint: desktop;\n\n.static {\n    // Queries that span or start at desktop are compiled:\n    @include mq($from: mobile) {\n        color: lawngreen;\n    }\n    @include mq(tablet, wide) {\n        color: seagreen;\n    }\n    @include mq($from: desktop) {\n        color: forestgreen;\n    }\n\n    // But these queries won’t be compiled:\n    @include mq($until: tablet) {\n        color: indianred;\n    }\n    @include mq($until: tablet, $and: '(orientation: landscape)') {\n        color: crimson;\n    }\n    @include mq(mobile, desktop) {\n        color: firebrick;\n    }\n}\n```\n\n### Verbose and shortand notations\n\nSometimes you’ll want to be extra verbose (e.g. if you’re developing a\nlibrary based on top of sass-mq), however for readability in a codebase,\nthe shorthand notation is recommended.\n\nAll of these examples output the exact same thing, and are here for\nreference so you can use the notation that best matches your needs:\n\n```scss\n// Verbose\n@include mq(\n    $from: false,\n    $until: desktop,\n    $and: false,\n    $media-type: $mq-media-type // defaults to 'all'\n) {\n    .foo {}\n}\n\n// Omitting argument names\n@include mq(\n    false,\n    desktop,\n    false,\n    $mq-media-type\n) {\n    .foo {}\n}\n\n// Omitting tailing arguments\n@include mq(false, desktop) {\n    .foo {}\n}\n\n// Recommended\n@include mq($until: desktop) {\n    .foo {}\n}\n```\n\n[See the detailed API documentation](http://sass-mq.github.io/sass-mq/#undefined-mixin-mq)\n\n### Adding custom breakpoints\n\n```scss\n@include mq-add-breakpoint(tvscreen, 1920px);\n\n.hide-on-tv {\n    @include mq(tvscreen) {\n        display: none;\n    }\n}\n```\n\n### Seeing the currently active breakpoint\n\nWhile developing, it can be nice to always know which breakpoint is\nactive. To achieve this, set the `$mq-show-breakpoints` variable to\nbe a list of the breakpoints you want to debug, ordered by width.\nThe name of the active breakpoint and its pixel and em values will\nthen be shown in the top right corner of the viewport.\n\n```scss\n// Adapt the list to include breakpoint names from your project\n$mq-show-breakpoints: (phone, phablet, tablet);\n```\n\n![$mq-show-breakpoints](https://raw.githubusercontent.com/sass-mq/sass-mq/master/show-breakpoints.gif)\n\n### Changing media type\n\nIf you want to specify a media type, for example to output styles\nfor screens only, set `$mq-media-type`:\n\n#### SCSS\n\n```scss\n$mq-media-type: screen;\n\n.screen-only-element {\n    @include mq(mobile) {\n        width: 300px;\n    }\n}\n```\n\n#### CSS output\n\n```css\n@media screen and (max-width: 19.99em) {\n    .screen-only-element {\n        width: 300px;\n    }\n}\n```\n\n## Running tests\n\n```sh\nnpm test\n```\n\n## Generating the documentation\n\nSass MQ is documented using [SassDoc](http://sassdoc.com/).\n\nGenerate the documentation locally:\n\n```sh\nsassdoc .\n```\n\nGenerate \u0026 deploy the documentation to \u003chttp://sass-mq.github.io/sass-mq/\u003e:\n\n```sh\nnpm run sassdoc\n```\n\n## Inspired By…\n\n- \u003chttps://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_conditionals.scss\u003e\n- \u003chttps://github.com/bits-sass/helpers-responsive/blob/master/_responsive.scss\u003e\n- \u003chttps://gist.github.com/magsout/5978325\u003e\n\n## On Mobile-first CSS With Legacy Browser Support\n\n- \u003chttp://jakearchibald.github.io/sass-ie/\u003e\n- \u003chttp://nicolasgallagher.com/mobile-first-css-sass-and-ie/\u003e\n- \u003chttp://cognition.happycog.com/article/fall-back-to-the-cascade\u003e\n- \u003chttp://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8\u003e\n\n## Who uses Sass MQ?\n\nSass MQ was developed in-house at [the Guardian](http://www.theguardian.com/).\n\nThese companies and projects use Sass MQ:\n\n- The Guardian\n- BBC (Homepage, Sport, News, Programmes)\n- The Financial Times\n- [Rightmove](http://www.rightmove.co.uk/)\n- [Stockholm International Fairs and Congress Centre](http://stockholmsmassan.se/?sc_lang=en)\n- [Beyond](https://bynd.com/)\n- [EQ Design](http://eqdesign.co.uk/)\n- [Baseguide](http://basegui.de/)\n- [Base Creative](http://www.basecreative.co.uk/)\n- [Locomotive](http://locomotive.ca/)\n- [Le Figaro](http://tvmag.lefigaro.fr/) (TV Mag)\n- [LunaWeb](http://www.lunaweb.fr)\n- [inuitcss](https://github.com/inuitcss/inuitcss)\n- [Hotelbeds Group](http://group.hotelbeds.com/)\n- [Beneš \u0026 Michl](http://www.benes-michl.cz)\n- [Manchester International Festival](http://mif.co.uk/)\n- [Shopify Polaris](https://polaris.shopify.com)\n- You? [Open an issue](https://github.com/sass-mq/sass-mq/issues/new?title=My%20company%20uses%20Sass%20MQ\u0026body=Hi,%20we%27re%20using%20Sass%20MQ%20at%20[name%20of%20your%20company]%20and%20we%27d%20like%20to%20be%20mentionned%20in%20the%20README%20of%20the%20project.%20Cheers!)\n\n----\n\nLooking for a more advanced sass-mq, with support for height and other niceties?  \nGive [@mcaskill's fork of sass-mq](https://github.com/mcaskill/sass-mq) a try.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseothemes%2Fmqkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseothemes%2Fmqkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseothemes%2Fmqkit/lists"}