Breakpoints
$breakpoint-map: (
// these are for width
'extra-small': 380px,
'small': 480px,
'medium': 768px,
'large': 992px,
'extra-large': 1200px,
'extra-extra-large': 1360px,
// these are for height
'extra-short': 450px,
'short': 550px,
'medium-tall': 650px,
'tall': 750px,
'extra-tall': 1200px
);
to extract one of these values directly, use mq-breakpoint()
// sass
.wibble {
width: mq-breakpoint('medium');
}
// css
.wibble {
width: 768px
}
This is not often needed in practice, since you can wrap your responsive rules with the mq() mix-in and set the breakpoint that way:
// sass
@include mq($until:'large') {
padding:$size-s;
}
// css
@media (max-width: 768px) {
padding: 10px;
}
Not all breakpoints are concerned with width - the second group of values in the hash above are for targeting viewports with a specific height...
'extra-short': 450px,
'short': 550px,
'medium-tall': 650px,
'tall': 750px,
'extra-tall': 1200px
the mq mixin accepts the same 'from','until', and 'at' keywords as the helpers we were using previously. It is inspired by sass-mq
Until...
These examples show a box that is filled with a teal color until the breakpoint indicated