CSS @function for Reusable Logic (No Sass Mixins)
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.
// Sass / SCSS@function fluid($min, $max) { @return clamp( /* [!code --] */ $min, calc($min + ($max - $min) * ((100vw - 320px) / 960)), $max ); /* [!code --] */}@function --fluid( /* */ --min <length>, /* */ --max <length> /* */) returns <length> { result: clamp( var(--min), 50vi, var(--max) );}function Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Chrome and Edge 139+ support @function. Firefox and Safari have not shipped it yet. Use a Sass or PostCSS fallback for wider coverage, or progressively enhance with @supports.
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.