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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$px

value to convert

Numbernone
$base-font-size

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

Numbernone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

Name of the breakpoint. One of $mq-breakpoints

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$from

(false) - One of $mq-breakpoints

String or Booleannone
$until

(false) - One of $mq-breakpoints

String or Booleannone
$and

(false) - Additional media query parameters

String or Booleannone
$media-type

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

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

Name of the breakpoint

Stringnone
$width

Width of the breakpoint

Numbernone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$show-breakpoints

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

Listnone
$breakpoints

($mq-breakpoints) - Breakpoint names and sizes

Mapnone

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