Category: Mixins

Back to Docs

Navigation

Breakpoint Mixins

Note: Mixins only work within the custom SCSS area of the ACSS dashboard.

ACSS has mixins for both max-width and min-width media queries. These allow you to write dynamic media queries easily:

Standard media query:

@include breakpoint(extension) {
  // Your CSS goes here.
}
Code language: PHP (php)

Mobile first media query:

@include breakpoint-up(extension) {
  // Your CSS goes here.
}
Code language: PHP (php)

“Extension” is the name of the breakpoint extension, e.g., xl, l, m, s.