These mixins take a px value breakpoint and set of style rules and converts them to the corresponding min or max width media query.

.respond-to-min(@bp, @rules);

.respond-to-max(@bp, @rules);

Ex.

// Tablet and above. .respond-to-min(@bp-sm-min, {
    .title {
        font-size: 2em;
    }
});

// Compiles to

@media only all and (min-width: 37.5625em) {
    .title {
        font-size: 2em;
    }
}

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.

.respond-to-range(@bp1, @bp2, @rules );

Ex. ``` // Tablet only. .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);
    .respond-to-print({
        color: var(--black);
    });
}

// ...Exports to
.example {
    color: #75787B;
}
@media print {
    .example {
        color: #101820;
    }
}
.print .example {
    color: #101820;
}