General

variables

[private] mq-base-font-size

Deprecated!

This setting will be removed in sass-mq v6.0.0

$mq-base-font-size: 16px !default;

Description

Base font size on the <body> element

Do not override this value, or things will break

Type

Number (unit)

Used by

Links

mq-responsive

$mq-responsive: true !default;

Description

Responsive mode

Set to false to enable support for browsers that do not support @media queries, (IE <= 8, Firefox <= 3, Opera <= 9)

You could create a stylesheet served exclusively to older browsers, where @media queries are rasterized

Type

Boolean

Example

// old-ie.scss
$mq-responsive: false;
@import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint
                 // larger breakpoints will be ignored

Links

mq-breakpoints

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

Description

Breakpoint list

Name your breakpoints in a way that creates a ubiquitous language across team members. It will improve communication between stakeholders, designers, developers, and testers.

Type

Map

Used by

Links

mq-static-breakpoint

$mq-static-breakpoint: desktop !default;

Description

Static breakpoint (for fixed-width layouts)

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 'false') in a old-ie.scss

Type

String

Example

// tablet-only.scss
//
// Ignore all styles above tablet breakpoint,
// and fix the styles (such as the layout) at tablet width
$mq-responsive: false;
$mq-static-breakpoint: tablet;
@import 'main'; // @media queries in this file will be rasterized up to tablet
                 // larger breakpoints will be ignored

Used by

  • [mixin] mq

Links

mq-show-breakpoints

$mq-show-breakpoints: () !default;

Description

Show breakpoints in the top right corner

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).

Type

Map

Example

$mq-show-breakpoints: (mobile, tablet, desktop);
@import 'path/to/mq';

Used by

mq-media-type

$mq-media-type: all !default;

Description

Customize the media type (for example: @media screen or @media print) By default sass-mq uses an "all" media type (@media all and …)

Type

String

Used by

  • [mixin] mq

Links

functions

mq-px2em

@function mq-px2em($px) { ... }

Description

Convert pixels to ems

Parameters

NameDescriptionTypeDefault value
$px

value to convert

Number—

Returns

Number

Example

$font-size-in-ems: mq-px2em(16px);
p { font-size: mq-px2em(16px); }

Requires

Used by

  • [mixin] mq

mq-get-breakpoint-width

@function mq-get-breakpoint-width($name) { ... }

Description

Get a breakpoint's width

Parameters

NameDescriptionTypeDefault value
$name

Name of the breakpoint. One of $mq-breakpoints

String—

Returns

Number —

Value in pixels

Example

$tablet-width: mq-get-breakpoint-width(tablet);
@media (min-width: mq-get-breakpoint-width(desktop)) {}

Requires

Used by

  • [mixin] mq

[private] _mq-quick-sort

@function _mq-quick-sort($list) { ... }

Description

Quick sort

Parameters

NameDescriptionTypeDefault value
$list

List to sort

List—

Returns

List —

Sorted List

Author

  • Sam Richards

[private] _mq-map-sort-by-value

@function _mq-map-sort-by-value($map) { ... }

Description

Sort a map by values (works with numbers only)

Parameters

NameDescriptionTypeDefault value
$map

Map to sort

Map—

Returns

Map —

Map sorted by value

mixins

mq

@mixin mq($from: false, $until: false, $and: false, $media-type: $mq-media-type) { ... }

Description

Media Query mixin

Parameters

NameDescriptionTypeDefault value
$from

One of $mq-breakpoints

String</code> or <code>Booleanfalse
$until

One of $mq-breakpoints

String</code> or <code>Booleanfalse
$and

Additional media query parameters

String</code> or <code>Booleanfalse
$media-type

Media type: screen, print…

String$mq-media-type

Example

.element {
  @include mq($from: mobile) {
    color: red;
  }
  @include mq($until: tablet) {
    color: blue;
  }
  @include mq(mobile, tablet) {
    color: green;
  }
  @include mq($from: tablet, $and: '(orientation: landscape)') {
    color: teal;
  }
  @include mq(950px) {
    color: hotpink;
  }
  @include mq(tablet, $media-type: screen) {
    color: hotpink;
  }
  // Advanced use:
  $my-breakpoints: (L: 900px, XL: 1200px);
  @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
    color: hotpink;
  }
}

Requires

Links

mq-add-breakpoint

@mixin mq-add-breakpoint($name, $width) { ... }

Description

Add a breakpoint

Parameters

NameDescriptionTypeDefault value
$name

Name of the breakpoint

String—
$width

Width of the breakpoint

Number—

Example

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

Requires

mq-show-breakpoints

@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) { ... }

Description

Show the active breakpoint in the top right corner of the viewport

Parameters

NameDescriptionTypeDefault value
$show-breakpoints

List of breakpoints to show in the top right corner

List$mq-show-breakpoints
$breakpoints

Breakpoint names and sizes

Map$mq-breakpoints

Example

// Show breakpoints using global settings
@include mq-show-breakpoints;

// Show breakpoints using custom settings
@include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));

Requires

Links