Utilities
Media queries
Mixins for consistent media queries that take px
values and convert them to ems.
Min and max width
These mixins take a px value breakpoint and set of style rules and converts them to the corresponding min or max width media query.
@include respond-to-min(vars-breakpoints.@bp) {
@rules
}
@include respond-to-max(vars-breakpoints.@bp) {
@rules
}
For example…
// Tablet and above.
@include respond-to-min(vars-breakpoints.@bp-sm-min) {
.title {
font-size: 2em;
}
}
…compiles to…
@media only all and (min-width: 37.5625em) {
.title {
font-size: 2em;
}
}
Range
This mixin takes both min and max px values and a set of style rules and converts them to the corresponding min and max media query.
@include respond-to-range(@bp1, @bp2) {
@rules
}
For example…
// Tablet only.
@include respond-to-range(@bp-sm-min, @bp-sm-max) {
.title {
font-size: 2em;
}
}
…compiles to…
@media only all and (min-width: 37.5625em) and (max-width: 56.25em) {
.title {
font-size: 2em;
}
}
Use the native @media print
media query and emulate the print type via the browser’s dev tools.