Functions

Functions in ACSS are a powerful way for advanced users to create custom utilities and code on the fly with the power of Automatic.css.

Importing the Functions (Pre 3.0)

Note: As of v3.0, functions, mixins, and variables work in the ACSS dashboard SCSS editor without any import files.

For installs prior to v3.0, or installations that use a third party tool, you’ll need to include the following import file:

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

fluidClamp(min, max)

This function creates a clamp() function for you, with the middle value being properly calculated based on your website’s max width.

The min and max arguments should be stated as rem values, without the unit attached.

Using this function via a custom class:

.my-class {
   font-size: 2.2rem;
   font-size: fluidClamp(2.2, 3.4);
}
Code language: CSS (css)

Using this function via a variable:

Since you can’t use functions in :root, you’ll need to assign your fluidClamp function to a SCSS variable first. Here’s an example of creating a new variable with this function:

$my-variable: fluidClamp(2.2, 3.4);
:root {
  --my-variable: #{$my-variable};
}
Code language: PHP (php)

rem()

ACSS often stores values without units to allow for certain types of calculations. Of course, to use the end result in a variable or a declaration, a unit is required. The rem() function attaches the rem unit to any number or variable.

For example, the $vp-max variable, which stores your website’s width value, is unitless. Let’s say you wanted to create a variable for a specific width, based on your website’s width. Here’s how you can use the rem() function with a simple calculation:

$my-custom-width: rem($vp-max * .33);
Code language: PHP (php)

This will create a variable equaling exactly 1/3 of your website’s width. If your website’s width is 1366, the end result will be 45.078rem if you’re set to 62.5% root font size and 27.173rem if your root font size is set to 100%.

ctr()

The ctr() function automatically converts pixel values to rems based on your website’s root font size.

.custom-container {
   max-inline-size: ctr(640);
}
Code language: CSS (css)

Based on the above example, the function would set the max-inline-size (max-width) of the container to the rem equivalent of 640px. That would be 64rem at 62.5% root font size or 40rem at 100% root font size. This function works anywhere a pixel or rem value is accepted.

percent()

This function works exactly like the rem() function above but will convert the final value into a whole-number percentage value. It’s most often used with variable calculations.

$my-percent: percent(5 * 5);
Code language: PHP (php)

Result: 25%

vw()

This function converts any raw value into a vw unit. It’s most often used with variable calculations.

$my-vw: vw(5 * 5);
Code language: PHP (php)

Result: 25vw

vh()

This function converts any raw value into a vh unit. It’s most often used with variable calculations.

$my-vh: vh(5 * 5);
Code language: PHP (php)

Result: 25vh

pow()

This function is used for exponentiation. It raises any number to the specified power.

$my-pow: pow($my-text-size, 3);
Code language: PHP (php)

If the value of $my-text-size is 2.4, this statement is the equivalent of 2.4³.

This function is most often used in scale-based calculations.

Result: 13.824

We’ll continue updating this documentation if more functions become available.

Navigation