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-width - [mixin]
mq - [mixin]
add-breakpoint - [mixin]
show-breakpoints
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
- [mixin]
show-breakpoints
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 Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$px | value to convert | Number | — none |
Returns
NumberExample
$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 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-width(tablet);
@media (min-width: get-breakpoint-width(desktop)) {}Requires
- [variable]
breakpoints
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, $media-type: $media-type) { ... }Description
Media Query mixin
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 |
$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
- [variable]
media-type - [variable]
breakpoints - [function]
px2em - [function]
get-breakpoint-width
Links
add-breakpoint
@mixin add-breakpoint($name, $width) { ... }Description
Add a breakpoint
Parameters
| parameter Name | parameter Description | parameter Type | parameter 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
- [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