Breakpoint Mixin
This mixin provides a quick way to apply certain styles to elements at certain breakpoints. Breakpoints can also be defined within the breakpoint variables. Like other mixins, usage will require that you install mustard via npm and include the source within your main SCSS file.
Example Usage:
@include breakpoint-min($bp-small) {
// will be applied to element above width $bp-small
}
@include breakpoint-max($bp-large) {
// will be applied to element below width $bp-large
}
@include breakpoint-min-max($bp-small, $bp-large) {
// will be applied to element above widht $bp-small and below width $bp-large
}
Mixin Code:
@mixin breakpoint-min($bp) {
@media (min-width: $bp) {
@content;
}
}
@mixin breakpoint-max($bp) {
@media (max-width: $bp) {
@content;
}
}
@mixin breakpoint-min-max($bp1, $bp2) {
@media (min-width: $bp1) and (max-width: $bp2) {
@content;
}
}