Mixins

Mixins allow advanced users to hook into styling recipes within ACSS.

Importing the Mixins

Mixins requires the ACSS Doorway file. Add this to a global SCSS stylesheet:

@import 'plugins/automaticcss-plugin/assets/scss/helpers/doorway.scss';
Code language: CSS (css)

Breakpoints & Media Queries

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) {
  @content;
}
Code language: CSS (css)

Mobile first media query:

@include breakpoint-up(extension) {
  @content;
}
Code language: CSS (css)

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

Text & Headings

Fluid Text with Fallbacks

This mixin will produce fluid-responsive text with fallbacks. It accepts three values (pure, min, max). The “pure” value is the standard rem fallback for browsers that don’t support clamp or calc.

.my-card__text {
  @include fluid-text(1.4, 1.4, 1.6)
}
Code language: PHP (php)

Example Output:

.my-card__text {
  font-size: 1.4rem;
  font-size: calc(
    1.4rem + (0.2 * ((100vw - 32rem) / 96))
  );
  font-size: clamp(1.4rem, calc(0.2083333333vw + 1.5333333333rem), 1.6rem);
}
Code language: CSS (css)

Padding & Section Padding

This mixin will produce fluid-responsive padding with fallbacks. It accepts three values (pure, min, max). The “pure” value is the standard rem fallback for browsers that don’t support clamp or calc.

.my-card {
  @include fluid-padding(2, 2.2, 2.8);
}
Code language: PHP (php)

Example Output:

.my-card__text {
  padding: 2rem;
  padding: calc(
    2.2rem + (0.2 * ((100vw - 32rem) / 96))
  );
  padding: clamp(2rem, calc(0.2083333333vw + 1.5333333333rem), 2.8rem);
}
Code language: CSS (css)

A separate mixin exists for section padding:

.my-hero {
  @include fluid-section-padding(5, 5, 8);
}
Code language: PHP (php)

The section padding mixin will apply the desired values to top and bottom padding while retaining your website’s global inline section padding.

Buttons

Have you ever wanted to create a custom button that still leverages all your global button defaults? The following mixin will add all your global button defaults:

.my-custom-button {
   @include btn-default;
}
Code language: PHP (php)

Example output:

.my-custom-button {
  padding: 1em 1.5em;
  border-width: .2rem;
  border-radius: var(--radius-m);
  text-transform: uppercase;
  -webkit-text-decoration: none;
  text-decoration: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  min-width: 10rem;
  line-height: 1;
}
Code language: CSS (css)

Navigation