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
}
Ex.
// 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
}
Ex. ``` // 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 LESS...
.example {
color: var(--gray);
@include respond-to-print() {
color: var(--black);
}
}
// ...Exports to
.example {
color: #75787B;
}
@media print {
.example {
color: #101820;
}
}
.print .example {
color: #101820;
}