General

variables

breakpoints

$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

show-breakpoints

$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

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

Used by

media-type

$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

px2em

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

Description

Convert pixels to ems

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$px

value to convert

Number none

Returns

Number

Example

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

Used by

  • [mixin] mq

get-breakpoint-width

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

Description

Get a breakpoint's width

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Name of the breakpoint. One of $breakpoints

String none

Returns

Number

Value in pixels

Example

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

Requires

Used by

  • [mixin] mq

[private] _quick-sort

@function _quick-sort($list) { ... }

Description

Quick sort

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$list

List to sort

List none

Returns

List

Sorted List

Author

  • Sam Richards

[private] _map-sort-by-value

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

Description

Sort a map by values (works with numbers only)

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to sort

Map none

Returns

Map

Map sorted by value

mixins

mq

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

Description

Media Query mixin

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$from

One of $breakpoints

String or Booleanfalse
$until

One of $breakpoints

String or Booleanfalse
$and

Additional media query parameters

String or Booleanfalse
$media-type

Media type: screen, print…

String$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) {
    color: hotpink;
  }
}

Requires

Links

add-breakpoint

@mixin 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 add-breakpoint(tvscreen, 1920px);
@include mq(tvscreen) {}

Requires

show-breakpoints

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$show-breakpoints

List of breakpoints to show in the top right corner

List$show-breakpoints
$breakpoints

Breakpoint names and sizes

Map$breakpoints

Example

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

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

Requires

Links