@function

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. The feature is similar in nature to a more dynamic version of custom properties (CSS variables) . Note: There is also a @function at-rule in Sass which is similar in purpose but different in function to the native CSS @function . Be aware of this if Sass is part of your stack or when searching for resources as it is easy to conflate one with the other. Syntax The @function at-rule defines a custom function, using the following syntax: @function --function-name(#?) [returns ]? { } = ? [ : ]? In other words, we define the function’s name as a dashed ident ( --my-function ), supply some condition we want to match ( ), and say what sort of thing we want to return, say, a CSS[ ] value . And, if that condition matches, we apply styles ( ). Let’s dig deeper into what those things actually mean. Arguments and Descriptors There are a number of parts to the syntax for @function to handle different parts of the feature. It may all look very complex — and it is — but it’ll become clearer later when we look at some examples. --function-token A user-defined identifier that must start with two dashes ( -- ), similar to the dashed-ident of custom properties. Just like custom properties, the name is case-sensitive. For example, --conversion and --Conversion would refer to different custom function definitions. @function --progression() (optional) An optional comma-separated list of inputs that can include: --param-name : The name of the argument (must start with -- ). (optional): A keyword or type (e.g., , ) that tells the function what sort of input or result it’s returni