Native CSS Functions: Everything you need to know about @function

CSS is evolving to become more powerful. A major new feature is arriving: custom functions with the @function rule. Previously, we had to use tools like SASS or JavaScript to perform complex calculations. Today, the browser can do it on its own.

For a project where speed is the priority, this is a revolution. Using the browser’s native engine is always faster than adding external code. This article explains how it works, step by step.

#What is a native CSS function?

A function is a small machine. You give it information (an input), it performs a calculation, and it gives you a result (an output).

With @function, you create your own calculation tools. This allows you to organize your code and avoid repeating the same calculations everywhere. This is known as encapsulation.

Why is it faster?

When you use JavaScript to modify a style, the browser must stop to read the script. With CSS functions, the browser performs the calculation at the same time it draws the page.

• Time saving: No need to load heavy files.
• Fluidity: The calculation is handled by the browser engine (in C++), which is highly performant.

#How to write a @function

The syntax is precise. It resembles CSS variables (Custom Properties). Your function name must always start with two dashes --.

Here is a simple example to calculate a text size:

Copy/* Base variable for calculations */
$font-size : .625;

@function --main-spacing(--multiplier) {
  result : calc(--multiplier * 1rem * $font-size);
}

.card:not(.is-compact) {
  margin-block-end : --main-spacing(4);
  padding-inline   : --main-spacing(2);
}

#The type system: setting strict rules

For a function to work well, you must tell it what kind of data it will receive. This is called typing. CSS uses words between angle brackets to define these types.

Most common types:

1. <number>: A simple number (e.g., 1, 2, 1.5).
2. <length>: A size (e.g., 10px, 2rem, 15vh).
3. <color>: A color (e.g., red, #ff0000, oklch(50% 0.1 20)).
4. <percentage>: A percentage (e.g., 50%).

By specifying the type, you help the browser prepare the calculation. If you send a color to a function that expects a size, the browser will immediately know there is an error.

#Polymorphism: the power of “or”

This is a complicated word for a simple idea: a function can accept several types of data. To do this, we use the vertical bar symbol | which means “or”.

Example of a flexible function

Imagine a function that handles border thickness. It could accept a specific number or a percentage.

Copy@function --border-logic(--size : type(<length> | <percentage>)) {
  result : calc(--size / 2);
}

.box {
  border-inline-start-width : --border-logic(1rem * $font-size);
}

.box-relative {
  border-inline-start-width : --border-logic(10%);
}

Thanks to type(<length> | <percentage>), your function is polymorphic. It adapts to what you give it. This is very useful for creating flexible design systems.

#Fluid design without media queries

Performance also comes from simplicity. Instead of creating different rules for each screen size (media queries), we can use mathematical functions like clamp().

A custom function can automate this calculation for your entire site.

Copy@function --make-fluid(--min, --max) {
  /* Automatic calculation between 320px and 1280px */
  --slope     : calc((--max - --min) / (128 - 32));
  --intercept : calc(--min - --slope * 32);

  result      : clamp(
    --min * 1rem * $font-size,
    calc(--slope * 100vw + --intercept * 1rem * $font-size),
    --max * 1rem * $font-size
  );
}

.title {
  font-size : --make-fluid(2, 5);
}

The browser calculates the ideal size continuously. This is much lighter for the processor than changing styles every time the window is resized.

#Limits to know

Even if these functions are powerful, they have strict rules to remain fast:

1. No infinite loops: A function cannot call itself. If it does, it stops immediately.
2. Last word to the result: If you write result multiple times in the same function, the last one will be used.
3. No complex local variables: For now, it is better to perform calculations directly in result.

#Why is this important for you?

As a developer, your goal is to create a perfect experience. A site that reacts quickly is a site that people love to use. Native functions allow you to:

• Reduce unnecessary code.
• Centralize mathematical logic.
• Improve performance scores (Core Web Vitals).

It is an essential tool for building tomorrow’s web. Less JavaScript, more intelligent CSS.

#Conclusion

The arrival of @function transforms CSS into a more logical and performant language. By understanding how to use types and polymorphism, you can create very solid code architectures.

Performance is not only gained by optimizing images; it is also gained by choosing the right native tools. The future of CSS is here: it is fast, it is typed, and it is incredibly efficient.

Frequently Asked Questions

Lionel Péramo

Web Performance & Eco-design Expert

Full Stack Developer and creator of the OTRA framework (PHP) and EcoComposer library. I write to make the web faster and more inclusive.

About me →