General

variables

breakpoints

$breakpoints: (
  3 |   mobile: 320px,
  4 |   tablet: 740px,
  5 |   desktop: 980px,
  6 |   wide: 1300px,
  7 | ) !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 length. For example: (mobile, tablet, desktop).

Type

Map

Example

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

Used by

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

Links

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

Links

functions

px2em

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

Description

Convert pixels to ems

Parameters

NameDescriptionTypeDefault value
$px

value to convert

Number—

Returns

Number

Example

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

get-breakpoint-length

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

Description

Get a breakpoint's length

Parameters

NameDescriptionTypeDefault value
$name

Name of the breakpoint. One of $breakpoints

String—

Returns

Number —

Value in pixels

Example

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

Requires

stringify

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

Description

Joins all elements of $list with $glue.

Parameters

NameDescriptionTypeDefault value
$list

list to cast

List—
$glue

value to use as a join string

String' and '

Returns

String

Example

stringify(a b c)
 40 | // a and b and c
stringify(a b c, ', ')
 41 | // 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

NameDescriptionTypeDefault value
$from

One of $breakpoints

String or Booleanfalse
$until

One of $breakpoints

String or Booleanfalse
$and

Additional media query parameters

String or Booleanfalse
$or

Alternative media query parameters

String or Booleanfalse
$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);
 96 | 
 97 | $mq-palm: mq($until: tablet);
 98 | 
 99 | $mq-lap: mq(mobile, tablet);
100 | 
101 | $mq-portable: mq($from: tablet, $and: '(orientation: landscape)');
102 | 
103 | $mq-desk-small: mq(950px) {
104 | 
105 | $mq-portable-screen: mq(tablet, $media-type: screen) {
106 | 
107 | // Advanced use:
108 | $my-breakpoints: (L: 900px, XL: 1200px);
109 | $mq-custom: mq(L, $breakpoints: $my-breakpoints);

Requires

Used by

  • [mixin] mq

[private] _quick-sort

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

Description

Quick sort

Parameters

NameDescriptionTypeDefault value
$list

List to sort

List—

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

NameDescriptionTypeDefault value
$map

Map to sort

Map—

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

NameDescriptionTypeDefault value
$from

One of $breakpoints

String or Booleanfalse
$until

One of $breakpoints

String or Booleanfalse
$and

Additional media query parameters

String or Booleanfalse
$or

Alternative media query parameters

String or Booleanfalse
$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 *;
169 | .element {
170 |   @include mq($from: mobile) {
171 |     color: red;
172 |   }
173 |   @include mq($until: tablet) {
174 |     color: blue;
175 |   }
176 |   @include mq(mobile, tablet) {
177 |     color: green;
178 |   }
179 |   @include mq($from: tablet, $and: '(orientation: landscape)') {
180 |     color: teal;
181 |   }
182 |   @include mq(950px) {
183 |     color: hotpink;
184 |   }
185 |   @include mq(tablet, $media-type: screen) {
186 |     color: hotpink;
187 |   }
188 |   // Advanced use:
189 |   $my-breakpoints: (L: 900px, XL: 1200px);
190 |   @include mq(L, $breakpoints: $my-breakpoints) {
191 |     color: hotpink;
192 |   }
193 | }

Requires

Links

add-breakpoint

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

Description

Add a breakpoint

Parameters

NameDescriptionTypeDefault value
$name

Name of the breakpoint

String—
$length

Length of the breakpoint

Number—

Example

@include add-breakpoint(tvscreen, 1920px);
200 | @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

NameDescriptionTypeDefault 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
223 | @include show-breakpoints;
224 | 
225 | // Show breakpoints using custom settings
226 | @include show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));

Requires

Links