CSS @function -- Native Custom Functions Are Here

Let's be honest -- if you've ever wished you could write a reusable function in CSS the way you do in JavaScript or Sass, you're not alone. Well, the wait is over. CSS now has native functions via @function, and they shipped in Chrome 139.

What Is @function?

The @function at-rule lets you define custom functions directly in your stylesheet. You give it a name, parameters, and a return value using the result descriptor.

@function --fluid-size(--min, --max, --min-vw: 320px, --max-vw: 1200px) {
  --slope: calc((var(--max) - var(--min)) / (var(--max-vw) - var(--min-vw)));
  --intercept: calc(var(--min) - var(--slope) * var(--min-vw));
  result: clamp(var(--min), calc(var(--intercept) + var(--slope) * 100vw), var(--max));
}

Using Your Function

Once defined, call it like any CSS function:

h1 {
  font-size: --fluid-size(1rem, 3rem);
}

.container {
  padding: --fluid-size(1rem, 4rem);
}

Why This Matters

Here's the thing -- this replaces Sass functions entirely for many use cases. No build step, no preprocessor, just native CSS.

Native to the browser -- no build tools needed
Supports default parameter values
Works with any CSS value type
Composable -- functions can call other functions

Browser Support

Chrome 139+ (stable). Other browsers in progress. Use @supports for progressive enhancement.

Real-World Example: Design System Spacing

@function --space(--multiplier) {
  result: calc(var(--multiplier) * 0.25rem);
}

.card {
  padding: --space(4); /* 1rem */
  margin-bottom: --space(6); /* 1.5rem */
  gap: --space(3); /* 0.75rem */
}

The good news is that this is just the beginning. Combined with CSS if() and custom properties, native functions make CSS a genuinely programmable language.

• • •

Happy coding!

If you want to go deeper and learn how to build real, production-ready CSS design systems step by step, check out my full course here: CSS Design Systems Course If you found this helpful, I'd love to connect! Follow me on Twitter/X @alexandersstudi or LinkedIn for more CSS and design system tips.

Post not found

CSS @function -- Native Custom Functions Are Here