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

[function] get-breakpoint-length
[function] mq
[mixin] mq
[mixin] add-breakpoint
[mixin] show-breakpoints

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 length. For example: (mobile, tablet, desktop).

Type

Map

Example

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

Used by

[mixin] show-breakpoints

range-feature

$range-feature: width !default;

Description

Customize the media range feature (for example: @media (min-width…) or @media (min-height:…)) By default sass-mq uses an width range feature.

If you want to overried the range feature, you can use this option.

Type

String

Example

@use 'path/to/mq' with ($range-feature: height);

Used by

[function] mq
[mixin] mq

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

If you want to overried the media type, you can use this option.

Type

String

Example

@use 'path/to/mq' with ($media-type: 'screen');

Used by

[function] mq
[mixin] mq

functions

px2em

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

Description

Convert pixels to ems

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$px`	value to convert	`Number`	— none

Returns

Number

Example

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

get-breakpoint-length

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

Description

Get a breakpoint's length

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the breakpoint. One of $breakpoints	`String`	— none

Returns

Number —

Value in pixels

Example

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

Requires

[variable] breakpoints

stringify

@function stringify($list, $glue: ' and ') { ... }

Description

Joins all elements of $list with $glue.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	list to cast	`List`	— none
`$glue`	value to use as a join string	`String`	`' and '`

Returns

String

Example

stringify(a b c)
// a and b and c

stringify(a b c, ', ')
// a, b, c

Used by

[function] mq

mq

@function mq($from: false, $until: false, $and: false, $or: false, $range-feature: $range-feature, $media-type: $media-type) { ... }

Description

Media Query function

Computes a media query based on a list of conditions.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$from`	One of $breakpoints	`String` or `Boolean`	`false`
`$until`	One of $breakpoints	`String` or `Boolean`	`false`
`$and`	Additional media query parameters	`String` or `Boolean`	`false`
`$or`	Alternative media query parameters	`String` or `Boolean`	`false`
`$range-feature`	Media range feature: width, height…	`String`	`$range-feature`
`$media-type`	Media type: screen, print…	`String`	`$media-type`

Example

$mq-lap-and-up: mq($from: mobile);

$mq-palm: mq($until: tablet);

$mq-lap: mq(mobile, tablet);

$mq-portable: mq($from: tablet, $and: '(orientation: landscape)');

$mq-desk-small: mq(950px) {

$mq-portable-screen: mq(tablet, $media-type: screen) {

// Advanced use:
$my-breakpoints: (L: 900px, XL: 1200px);
$mq-custom: mq(L, $breakpoints: $my-breakpoints);

Requires

[variable] range-feature
[variable] media-type
[variable] breakpoints
[function] stringify

Used by

[mixin] mq

[private] _quick-sort

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

Description

Quick sort

Parameters

parameter Name	parameter Description	parameter Type	parameter 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 Name	parameter Description	parameter Type	parameter Default value
`$map`	Map to sort	`Map`	— none

Returns

Map —

Map sorted by value

mixins

mq

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

Description

Media Query mixin

Generates a media query block, based on a list of conditions, around a set of nested CSS statements.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$from`	One of $breakpoints	`String` or `Boolean`	`false`
`$until`	One of $breakpoints	`String` or `Boolean`	`false`
`$and`	Additional media query parameters	`String` or `Boolean`	`false`
`$or`	Alternative media query parameters	`String` or `Boolean`	`false`
`$range-feature`	Media range feature: width, height…	`String`	`$range-feature`
`$media-type`	Media type: screen, print…	`String`	`$media-type`

Example

@use 'path/to/mq' as *;
.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

[variable] range-feature
[variable] media-type
[variable] breakpoints
[function] mq

add-breakpoint

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

Description

Add a breakpoint

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the breakpoint	`String`	— none
`$length`	Length of the breakpoint	`Number`	— none

Example

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

Requires

[variable] breakpoints

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 Name	parameter Description	parameter Type	parameter 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

[variable] breakpoints
[variable] show-breakpoints

General

variables

Description

Type

Used by

Links

Description

Type

Example

Used by

Description

Type

Example

Used by

Links

Description

Type

Example

Used by

Links

functions

Description

Parameters

Returns

Example

Description

Parameters

Returns

Example

Requires

Description

Parameters

Returns

Example

Used by

Description

Parameters

Example

Requires

Used by

[private] _quick-sort

Description

Parameters

Returns

Author

[private] _map-sort-by-value

Description

Parameters

Returns

mixins

Description

Parameters

Example

Requires

Links

Description

Parameters

Example

Requires

Description

Parameters

Example

Requires

Links