General

variables

mq-base-font-size

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

Description

Base font size on the <body> element

Type

Number (unit)

Used by

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 (e.g. 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, e.g. (mobile, tablet, desktop).

Type

Map

Used by

mq-media-type

$mq-media-type: all !default;

Description

Customize the media type (e.g. @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, $base-font-size) { ... }

Description

Convert pixels to ems

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$px

value to convert

Number none
$base-font-size

($mq-base-font-size) - <body> font size

Number none

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the breakpoint. One of $mq-breakpoints

String none

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

mixins

mq

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

Description

Media Query mixin

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$from

(false) - One of $mq-breakpoints

String or Boolean none
$until

(false) - One of $mq-breakpoints

String or Boolean none
$and

(false) - Additional media query parameters

String or Boolean none
$media-type

($mq-media-type) - Media type: screen, print…

String none

Content

This mixin allows extra content to be passed (through the @content directive). Role: styling rules, wrapped into a @media query when $responsive is true

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

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the breakpoint

String none
$width

Width of the breakpoint

Number none

Example

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

Requires

mq-show-breakpoints

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$show-breakpoints

($mq-show-breakpoints) - List of breakpoints to show in the top right corner

List none
$breakpoints

($mq-breakpoints) - Breakpoint names and sizes

Map none

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