postcss-mixins Bootstrap Breakpoint Media Queries

mixins.css

/* Boostrap 4.1.3 breakpoints for page widths */
/* Extra small devices (portrait phones, less than 576px)
 * No media query since this is the default in Bootstrap
 *
 * postcss-mixins: https://www.npmjs.com/package/postcss-mixins
*/
/* Small devices (landscape phones, 576px and up) */
@define-mixin sm_up {
  @media (min-width: 576px) {
    @mixin-content;
  }
}
/* Medium devices (tablets, 768px and up) */
@define-mixin md_up {
  @media (min-width: 768px) {
    @mixin-content;
  }
}
/* Large devices (desktops, 992px and up) */
@define-mixin lg_up {
  @media (min-width: 992px) {
    @mixin-content;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@define-mixin xl_up {
  @media (min-width: 1200px) {
    @mixin-content;
  }
}
/*
EXAMPLE USAGE:
.test-mixin {
  @mixin lg_up {
    font-size: 100px;
  }
}
 */