The @function at-rule defines CSS custom functions. These custom functions are reusable blocks of CSS that can accept arguments, contain complex logic, and return values based on that logic.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

The CSS `@function` at-rule is an experimental feature that lets developers define reusable custom CSS functions with typed parameters, default values, and return types. Functions are defined with dashed-ident names (e.g. `--my-func`), can accept typed arguments, support comma-separated list inputs, and return a single value via the `result` descriptor. They follow the CSS cascade, support conditional at-rules like `@media` and `@container` inside their body, allow nesting of other custom functions, and scope internal custom properties locally. Unlike `@mixin`, they cannot produce side effects or multiple declarations. Circular dependencies are caught and invalidated by the browser. Browser support is currently limited (Chrome 148+).