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;
    }
}

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.