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;
}
}
This mixin allows us to easily write styles that target both @media print and .print.
The following SCSS…
.example {
color: var(--gray);
@include respond-to-print() {
color: var(--black);
}
}
…compiles to…
.example {
color: #75787B;
}
@media print {
.example {
color: #101820;
}
}
.print .example {
color: #101820;
}