<commit_before><!doctype html><html lang="en"><head><meta charset="utf-8"><title>Sass MQ</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Sass MQ - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>mq() is a mixin that helps manipulating media queries in an elegant way.</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/sass-mq/sass-mq">Sass MQ</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-base-font-size" data-type="variable"><a href="#undefined-variable-mq-base-font-size">mq-base-font-size</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-responsive" data-type="variable"><a href="#undefined-variable-mq-responsive">mq-responsive</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-breakpoints" data-type="variable"><a href="#undefined-variable-mq-breakpoints">mq-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-static-breakpoint" data-type="variable"><a href="#undefined-variable-mq-static-breakpoint">mq-static-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-show-breakpoints" data-type="variable"><a href="#undefined-variable-mq-show-breakpoints">mq-show-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-media-type" data-type="variable"><a href="#undefined-variable-mq-media-type">mq-media-type</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-px2em" data-type="function"><a href="#undefined-function-mq-px2em">mq-px2em</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-get-breakpoint-width" data-type="function"><a href="#undefined-function-mq-get-breakpoint-width">mq-get-breakpoint-width</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="_mq-quick-sort" data-type="function"><a href="#undefined-function-_mq-quick-sort">_mq-quick-sort</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="_mq-map-sort-by-value" data-type="function"><a href="#undefined-function-_mq-map-sort-by-value">_mq-map-sort-by-value</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq" data-type="mixin"><a href="#undefined-mixin-mq">mq</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-add-breakpoint" data-type="mixin"><a href="#undefined-mixin-mq-add-breakpoint">mq-add-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-show-breakpoints" data-type="mixin"><a href="#undefined-mixin-mq-show-breakpoints">mq-show-breakpoints</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="undefined-variable-mq-base-font-size"><h3 class="item__heading"><a class="item__name" href="#variable-mq-base-font-size">mq-base-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-base-font-size: 16px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Base font size on the <code>&lt;body&gt;</code> element</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unit)</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-mq-px2em"><code>mq-px2em</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-responsive"><h3 class="item__heading"><a class="item__name" href="#variable-mq-responsive">mq-responsive</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-responsive: true !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Responsive mode</p><p>Set to <code>false</code> to enable support for browsers that do not support @media queries, (IE &lt;= 8, Firefox &lt;= 3, Opera &lt;= 9)</p><p>You could create a stylesheet served exclusively to older browsers, where @media queries are rasterized</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>// old-ie.scss
$mq-responsive: false;
@import &#39;main&#39;; // @media queries in this file will be rasterized up to $mq-static-breakpoint
                 // larger breakpoints will be ignored</code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#responsive-mode-off">Disabled responsive mode documentation</a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-mq-breakpoints">mq-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Breakpoint list</p><p>Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-mq-get-breakpoint-width"><code>mq-get-breakpoint-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq-add-breakpoint"><code>mq-add-breakpoint</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq-show-breakpoints"><code>mq-show-breakpoints</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint">Full documentation and examples</a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-static-breakpoint"><h3 class="item__heading"><a class="item__name" href="#variable-mq-static-breakpoint">mq-static-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-static-breakpoint: desktop !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Static breakpoint (for fixed-width layouts)</p><p>Define the breakpoint from $mq-breakpoints that should be used as the target width for the fixed-width layout (i.e. when $mq-responsive is set to &#39;false&#39;) in a old-ie.scss</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>// tablet-only.scss
//
// Ignore all styles above tablet breakpoint,
// and fix the styles (e.g. layout) at tablet width
$mq-responsive: false;
$mq-static-breakpoint: tablet;
@import &#39;main&#39;; // @media queries in this file will be rasterized up to tablet
                 // larger breakpoints will be ignored</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#adding-custom-breakpoints">Full documentation and examples</a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-show-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-mq-show-breakpoints">mq-show-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-show-breakpoints: () !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Show breakpoints in the top right corner</p><p>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, e.g. (mobile, tablet, desktop).</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq-show-breakpoints"><code>mq-show-breakpoints</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-media-type"><h3 class="item__heading"><a class="item__name" href="#variable-mq-media-type">mq-media-type</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-media-type: all !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Customize the media type (e.g. <code>@media screen</code> or <code>@media print</code>) By default sass-mq uses an &quot;all&quot; media type (<code>@media all and …</code>)</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#changing-media-type">Full documentation and examples</a></li></ul></section></section><section class="main__sub-section" id="undefined-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="undefined-function-mq-px2em"><h3 class="item__heading"><a class="item__name" href="#function-mq-px2em">mq-px2em</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function mq-px2em($px, $base-font-size) { 
    @if unitless($px) {
        @warn &quot;Assuming #{$px} to be in pixels, attempting to convert it into pixels.&quot;;
        @return mq-px2em($px * 1px, $base-font-size);
    } @else if unit($px) == em {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
 }" data-collapsed="@function mq-px2em($px, $base-font-size) { ... }"><code>@function mq-px2em($px, $base-font-size) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Convert pixels to ems</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$px</code></th><td data-label="desc"><p>value to convert</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$base-font-size</code></th><td data-label="desc"><p>($mq-base-font-size) - <code>&lt;body&gt;</code> font size</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$font-size-in-ems: mq-px2em(16px);
p { font-size: mq-px2em(16px); }</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-mq-base-font-size"><code>mq-base-font-size</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul></section><section class="main__item container item" id="undefined-function-mq-get-breakpoint-width"><h3 class="item__heading"><a class="item__name" href="#function-mq-get-breakpoint-width">mq-get-breakpoint-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function mq-get-breakpoint-width($name) { 
    @if map-has-key($breakpoints, $name) {
        @return map-get($breakpoints, $name);
    } @else {
        @warn &quot;Breakpoint #{$name} wasn&#39;t found in $breakpoints.&quot;;
    }
 }" data-collapsed="@function mq-get-breakpoint-width($name) { ... }"><code>@function mq-get-breakpoint-width($name) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Get a breakpoint&#39;s width</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$name</code></th><td data-label="desc"><p>Name of the breakpoint. One of $mq-breakpoints</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> &mdash;<p>Value in pixels</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$tablet-width: mq-get-breakpoint-width(tablet);
@media (min-width: mq-get-breakpoint-width(desktop)) {}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-mq-breakpoints"><code>mq-breakpoints</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul></section><section class="main__item container item" id="undefined-function-_mq-quick-sort"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#function-_mq-quick-sort">_mq-quick-sort</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function _mq-quick-sort($list) { 
    $less:  ();
    $equal: ();
    $large: ();

    @if length($list) &gt; 1 {
        $seed: nth($list, ceil(length($list) / 2));

        @each $item in $list {
            @if ($item == $seed) {
                $equal: append($equal, $item);
            } @else if ($item &lt; $seed) {
                $less: append($less, $item);
            } @else if ($item &gt; $seed) {
                $large: append($large, $item);
            }
        }

        @return join(join(_mq-quick-sort($less), $equal), _mq-quick-sort($large));
    }

    @return $list;
 }" data-collapsed="@function _mq-quick-sort($list) { ... }"><code>@function _mq-quick-sort($list) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Quick sort</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$list</code></th><td data-label="desc"><p>List to sort</p></td><td data-label="type"><code>List</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>List</code> &mdash;<p>Sorted List</p></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p><NAME></p></li></ul></section><section class="main__item container item" id="undefined-function-_mq-map-sort-by-value"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#function-_mq-map-sort-by-value">_mq-map-sort-by-value</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function _mq-map-sort-by-value($map) { 
    $map-sorted: ();
    $map-keys: map-keys($map);
    $map-values: map-values($map);
    $map-values-sorted: _mq-quick-sort($map-values);

    // Reorder key/value pairs based on key values
    @each $value in $map-values-sorted {
        $index: index($map-values, $value);
        $key: nth($map-keys, $index);
        $map-sorted: map-merge($map-sorted, ($key: $value));

        // Unset the value in $map-values to prevent the loop
        // from finding the same index twice
        $map-values: set-nth($map-values, $index, 0);
    }

    @return $map-sorted;
 }" data-collapsed="@function _mq-map-sort-by-value($map) { ... }"><code>@function _mq-map-sort-by-value($map) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Sort a map by values (works with numbers only)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$map</code></th><td data-label="desc"><p>Map to sort</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Map</code> &mdash;<p>Map sorted by value</p></div></section></section><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="undefined-mixin-mq"><h3 class="item__heading"><a class="item__name" href="#mixin-mq">mq</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin mq($from, $until, $and, $media-type) { 
    $min-width: 0;
    $max-width: 0;
    $media-query: &#39;&#39;;

    // From: this breakpoint (inclusive)
    @if $from {
        @if type-of($from) == number {
            $min-width: mq-px2em($from);
        } @else {
            $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints));
        }
    }

    // Until: that breakpoint (exclusive)
    @if $until {
        @if type-of($until) == number {
            $max-width: mq-px2em($until);
        } @else {
            $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em;
        }
    }

    // Responsive support is disabled, rasterize the output outside @media blocks
    // The browser will rely on the cascade itself.
    @if $responsive == false {
        $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints);
        $target-width: mq-px2em($static-breakpoint-width);

        // Output only rules that start at or span our target width
        @if (
            $and == false
            and $min-width &lt;= $target-width
            and (
                $until == false or $max-width &gt;= $target-width
            )
        ) {
            @content;
        }
    }

    // Responsive support is enabled, output rules inside @media queries
    @else {
        @if $min-width != 0 { $media-query: &#39;#{$media-query} and (min-width: #{$min-width})&#39;; }
        @if $max-width != 0 { $media-query: &#39;#{$media-query} and (max-width: #{$max-width})&#39;; }
        @if $and            { $media-query: &#39;#{$media-query} and #{$and}&#39;; }

        // Remove unnecessary media query prefix &#39;all and &#39;<commit_msg>Compile SassDoc<commit_after><!doctype html><html lang="en"><head><meta charset="utf-8"><title>Sass MQ</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Sass MQ - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>mq() is a mixin that helps manipulating media queries in an elegant way.</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/sass-mq/sass-mq">Sass MQ</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-base-font-size" data-type="variable"><a href="#undefined-variable-mq-base-font-size">mq-base-font-size</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-responsive" data-type="variable"><a href="#undefined-variable-mq-responsive">mq-responsive</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-breakpoints" data-type="variable"><a href="#undefined-variable-mq-breakpoints">mq-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-static-breakpoint" data-type="variable"><a href="#undefined-variable-mq-static-breakpoint">mq-static-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-show-breakpoints" data-type="variable"><a href="#undefined-variable-mq-show-breakpoints">mq-show-breakpoints</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-media-type" data-type="variable"><a href="#undefined-variable-mq-media-type">mq-media-type</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-px2em" data-type="function"><a href="#undefined-function-mq-px2em">mq-px2em</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-get-breakpoint-width" data-type="function"><a href="#undefined-function-mq-get-breakpoint-width">mq-get-breakpoint-width</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="_mq-quick-sort" data-type="function"><a href="#undefined-function-_mq-quick-sort">_mq-quick-sort</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="_mq-map-sort-by-value" data-type="function"><a href="#undefined-function-_mq-map-sort-by-value">_mq-map-sort-by-value</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq" data-type="mixin"><a href="#undefined-mixin-mq">mq</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-add-breakpoint" data-type="mixin"><a href="#undefined-mixin-mq-add-breakpoint">mq-add-breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="mq-show-breakpoints" data-type="mixin"><a href="#undefined-mixin-mq-show-breakpoints">mq-show-breakpoints</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="undefined-variable-mq-base-font-size"><h3 class="item__heading"><a class="item__name" href="#variable-mq-base-font-size">mq-base-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-base-font-size: 16px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Base font size on the <code>&lt;body&gt;</code> element</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unit)</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-mq-px2em"><code>mq-px2em</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-responsive"><h3 class="item__heading"><a class="item__name" href="#variable-mq-responsive">mq-responsive</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-responsive: true !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Responsive mode</p><p>Set to <code>false</code> to enable support for browsers that do not support @media queries, (IE &lt;= 8, Firefox &lt;= 3, Opera &lt;= 9)</p><p>You could create a stylesheet served exclusively to older browsers, where @media queries are rasterized</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>// old-ie.scss
$mq-responsive: false;
@import &#39;main&#39;; // @media queries in this file will be rasterized up to $mq-static-breakpoint
                 // larger breakpoints will be ignored</code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#responsive-mode-off">Disabled responsive mode documentation</a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-mq-breakpoints">mq-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
) !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Breakpoint list</p><p>Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-mq-get-breakpoint-width"><code>mq-get-breakpoint-width</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq-add-breakpoint"><code>mq-add-breakpoint</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq-show-breakpoints"><code>mq-show-breakpoints</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint">Full documentation and examples</a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-static-breakpoint"><h3 class="item__heading"><a class="item__name" href="#variable-mq-static-breakpoint">mq-static-breakpoint</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-static-breakpoint: desktop !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Static breakpoint (for fixed-width layouts)</p><p>Define the breakpoint from $mq-breakpoints that should be used as the target width for the fixed-width layout (i.e. when $mq-responsive is set to &#39;false&#39;) in a old-ie.scss</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>// tablet-only.scss
//
// Ignore all styles above tablet breakpoint,
// and fix the styles (e.g. layout) at tablet width
$mq-responsive: false;
$mq-static-breakpoint: tablet;
@import &#39;main&#39;; // @media queries in this file will be rasterized up to tablet
                 // larger breakpoints will be ignored</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#adding-custom-breakpoints">Full documentation and examples</a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-show-breakpoints"><h3 class="item__heading"><a class="item__name" href="#variable-mq-show-breakpoints">mq-show-breakpoints</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-show-breakpoints: () !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Show breakpoints in the top right corner</p><p>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, e.g. (mobile, tablet, desktop).</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$mq-show-breakpoints: (mobile, tablet, desktop);
@import &#39;path/to/mq&#39;;</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq-show-breakpoints"><code>mq-show-breakpoints</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-mq-media-type"><h3 class="item__heading"><a class="item__name" href="#variable-mq-media-type">mq-media-type</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$mq-media-type: all !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Customize the media type (e.g. <code>@media screen</code> or <code>@media print</code>) By default sass-mq uses an &quot;all&quot; media type (<code>@media all and …</code>)</p></div><h3 class="item__sub-heading">Type</h3><p><code>String</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://github.com/sass-mq/sass-mq#changing-media-type">Full documentation and examples</a></li></ul></section></section><section class="main__sub-section" id="undefined-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="undefined-function-mq-px2em"><h3 class="item__heading"><a class="item__name" href="#function-mq-px2em">mq-px2em</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function mq-px2em($px, $base-font-size) { 
    @if unitless($px) {
        @warn &quot;Assuming #{$px} to be in pixels, attempting to convert it into pixels.&quot;;
        @return mq-px2em($px * 1px, $base-font-size);
    } @else if unit($px) == em {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
 }" data-collapsed="@function mq-px2em($px, $base-font-size) { ... }"><code>@function mq-px2em($px, $base-font-size) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Convert pixels to ems</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$px</code></th><td data-label="desc"><p>value to convert</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$base-font-size</code></th><td data-label="desc"><p>($mq-base-font-size) - <code>&lt;body&gt;</code> font size</p></td><td data-label="type"><code>Number</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$font-size-in-ems: mq-px2em(16px);
p { font-size: mq-px2em(16px); }</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-mq-base-font-size"><code>mq-base-font-size</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul></section><section class="main__item container item" id="undefined-function-mq-get-breakpoint-width"><h3 class="item__heading"><a class="item__name" href="#function-mq-get-breakpoint-width">mq-get-breakpoint-width</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function mq-get-breakpoint-width($name) { 
    @if map-has-key($breakpoints, $name) {
        @return map-get($breakpoints, $name);
    } @else {
        @warn &quot;Breakpoint #{$name} wasn&#39;t found in $breakpoints.&quot;;
    }
 }" data-collapsed="@function mq-get-breakpoint-width($name) { ... }"><code>@function mq-get-breakpoint-width($name) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Get a breakpoint&#39;s width</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$name</code></th><td data-label="desc"><p>Name of the breakpoint. One of $mq-breakpoints</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Number</code> &mdash;<p>Value in pixels</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>$tablet-width: mq-get-breakpoint-width(tablet);
@media (min-width: mq-get-breakpoint-width(desktop)) {}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-mq-breakpoints"><code>mq-breakpoints</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-mq"><code>mq</code></a></li></ul></section><section class="main__item container item" id="undefined-function-_mq-quick-sort"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#function-_mq-quick-sort">_mq-quick-sort</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function _mq-quick-sort($list) { 
    $less:  ();
    $equal: ();
    $large: ();

    @if length($list) &gt; 1 {
        $seed: nth($list, ceil(length($list) / 2));

        @each $item in $list {
            @if ($item == $seed) {
                $equal: append($equal, $item);
            } @else if ($item &lt; $seed) {
                $less: append($less, $item);
            } @else if ($item &gt; $seed) {
                $large: append($large, $item);
            }
        }

        @return join(join(_mq-quick-sort($less), $equal), _mq-quick-sort($large));
    }

    @return $list;
 }" data-collapsed="@function _mq-quick-sort($list) { ... }"><code>@function _mq-quick-sort($list) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Quick sort</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$list</code></th><td data-label="desc"><p>List to sort</p></td><td data-label="type"><code>List</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>List</code> &mdash;<p>Sorted List</p></div><h3 class="item__sub-heading">Author</h3><ul class="list-unstyled"><li><p><NAME></p></li></ul></section><section class="main__item container item" id="undefined-function-_mq-map-sort-by-value"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#function-_mq-map-sort-by-value">_mq-map-sort-by-value</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function _mq-map-sort-by-value($map) { 
    $map-sorted: ();
    $map-keys: map-keys($map);
    $map-values: map-values($map);
    $map-values-sorted: _mq-quick-sort($map-values);

    // Reorder key/value pairs based on key values
    @each $value in $map-values-sorted {
        $index: index($map-values, $value);
        $key: nth($map-keys, $index);
        $map-sorted: map-merge($map-sorted, ($key: $value));

        // Unset the value in $map-values to prevent the loop
        // from finding the same index twice
        $map-values: set-nth($map-values, $index, 0);
    }

    @return $map-sorted;
 }" data-collapsed="@function _mq-map-sort-by-value($map) { ... }"><code>@function _mq-map-sort-by-value($map) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Sort a map by values (works with numbers only)</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$map</code></th><td data-label="desc"><p>Map to sort</p></td><td data-label="type"><code>Map</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Map</code> &mdash;<p>Map sorted by value</p></div></section></section><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="undefined-mixin-mq"><h3 class="item__heading"><a class="item__name" href="#mixin-mq">mq</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin mq($from, $until, $and, $media-type) { 
    $min-width: 0;
    $max-width: 0;
    $media-query: &#39;&#39;;

    // From: this breakpoint (inclusive)
    @if $from {
        @if type-of($from) == number {
            $min-width: mq-px2em($from);
        } @else {
            $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints));
        }
    }

    // Until: that breakpoint (exclusive)
    @if $until {
        @if type-of($until) == number {
            $max-width: mq-px2em($until);
        } @else {
            $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em;
        }
    }

    // Responsive support is disabled, rasterize the output outside @media blocks
    // The browser will rely on the cascade itself.
    @if $responsive == false {
        $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints);
        $target-width: mq-px2em($static-breakpoint-width);

        // Output only rules that start at or span our target width
        @if (
            $and == false
            and $min-width &lt;= $target-width
            and (
                $until == false or $max-width &gt;= $target-width
            )
            and $media-type != &#39;print&#39;
        ) {
            @content;
        }
    }

    // Responsive support is enabled, output rules inside @media queries
    @else {
        @if $min-width != 0 { $media-query: &#39;#{$media-query} and (min-width: #{$min-width})&#39;; }
        @if $max-width != 0 { $media-query: &#39;#{$media-query} and (max-width: #{$max-width})&#39;; }
        @if $and            { $media-query: &#39;#{$media-query} and #{$and}&#39;; }

        // Remove unnecessary media query prefix &#39;all and &#39;
{'fraction_non_alphanumeric': 0.211846749160182, 'fraction_numerical': 0.009354934728069057, 'mean_word_length': 6.311518731540494, 'pattern_counts': {'":': 0, '<': 1655, '<?xml version=': 0, '>': 1653, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7100284', 'n_tokens_mistral': 15296, 'n_tokens_neox': 14980, 'n_words': 2313}