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@function fluid($min, $max) {
3 @return clamp(
4 #{$min},
5 #{$min} + (#{$max} - #{$min}) * ...,
6 #{$max}
7 );
8}
9
10/* Requires build step to compile */
2 --min, --max
3) {
4 @return clamp(
5 var(--min),
6 50vi,
7 var(--max)
8 );
9}
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.