$breakpoints
$breakpoints: () !default;Description
Establish a map of named breakpoints.
If you have Accoutrement-Scale installed, you can use the scale syntax for describing size-relationships and adjustments – and even reference $sizes as though they are $breakpoints. Otherwise, the map should contain only valid CSS length values.
Examples
$breakpoints: (
'small': 30em,
'medium': 45em,
);$breakpoints: (
'small': 30em ('convert-units': 'browser-ems'),
'medium': 'small' ('times': 1.5),
);used by
@function _get-breakpoint() [private]
@mixin below()
Description
Generate a max–<width/height> query, for styling elements below the given viewport width. To help with overlapping min/max queries, we remove 1px (or 0.01em) from every max value to avoid media-query overlap.
Parameters
$max: (length | string)
The name of a documented breakpoint/size, or an arbitarty length to use in the query.
$prop: 'width' ('width' | 'height')
The property (width or height) to test against, for a result of e.g. (max-width: 30em).
Examples
@include below(30em) {
html { background: red; }
}@media (max-width: 29.99em) {
html {
background: red;
}
}
$breakpoints: ('red': 30em);
@include below('red') {
html { background: red; }
}@media (max-width: 29.99em) {
html {
background: red;
}
}
requires
@function _get-breakpoint() [private]
@function _fix-max() [private]
@mixin above()
Description
Generate a min-<width/height> query, for styling elements above the given viewport width.
Parameters
$min: (length | string)
The name of a documented breakpoint/size, or an arbitarty length to use in the query.
$prop: 'width' ('width' | 'height')
The property (width or height) to test against, for a result of e.g. (min-width: 30em).
Examples
@include above(50em) {
html { background: green; }
}@media (min-width: 50em) {
html {
background: green;
}
}
$breakpoints: ('green': 50em);
@include above('green') {
html { background: green; }
}@media (min-width: 50em) {
html {
background: green;
}
}
requires
@function _get-breakpoint() [private]
@mixin between()
Description
Generate a min-and-max-<width/height> query, for styling elements between given viewport widths. To help with overlapping min/max queries, we remove 1px (or 0.01em) from every max value to avoid media-query overlap.
Parameters
$min: (length | string)
The name of a documented breakpoint/size, or an arbitarty length to use as a minimum in the query.
$max: (length | string)
The name of a documented breakpoint/size, or an arbitarty length to use as a maximum in the query.
$prop: 'width' ('width' | 'height')
The property (width or height) to test against, for a result of e.g. (min-width: 30em).
Examples
@include between(30em, 50em) {
html { background: yellow; }
}@media (min-width: 30em) and (max-width: 49.99em) {
html {
background: yellow;
}
}
$breakpoints: (
'red': 30em,
'green': 50em,
);
@include between('red', 'green') {
html { background: yellow; }
}@media (min-width: 30em) and (max-width: 49.99em) {
html {
background: yellow;
}
}