Reusable CSS logic without Sass mixins
Reusable calculations and logic in stylesheets used to require Sass or other preprocessors. Native CSS @function lets you define custom functions that return computed values, right in your stylesheet.
2 --min, --max
3) {
4 @return clamp(
5 var(--min),
6 50vi,
7 var(--max)
8 );
9}
2@function fluid($min, $max) {
3 @return clamp(
4 #{$min},
5 #{$min} + (#{$max} - #{$min}) * ...,
6 #{$max}
7 );
8}
9
10/* Requires build step to compile */
Browser Support for @function
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
No build step
Native CSS functions run in the browser. No Sass compiler, no PostCSS plugin, no build pipeline required.
Runtime computed
Unlike Sass which compiles to static values, CSS @function can use runtime values like viewport units, custom properties, and env().
Composable
Functions can call other functions and use custom properties. Build complex design token systems with pure CSS.
How it works
Preprocessors like Sass introduced functions decades ago, allowing developers to encapsulate reusable calculations. But Sass functions compile to static values at build time — they can't react to runtime conditions like viewport size changes or user preferences.
CSS @function brings this capability natively to the browser. You define a function with @function --name(--param) { @return ... } and call it anywhere a value is expected: font-size: --fluid(1rem, 2rem). Because it runs at runtime, it can use viewport units, custom properties, and other dynamic values that Sass simply can't access.