CSS <dashed-function> Data Type

CSS <dashed-function> Data Type

The CSS <dashed-function> data type represents a call to an author-defined CSS custom function. The function name begins with two hyphens (--), which separates author-defined function names from functions defined by CSS.

Syntax

A <dashed-function> is a functional notation whose function name begins with two hyphens. Its formal syntax is:

<dashed-function> = --*( <declaration-value>#? )

The arguments are enclosed in parentheses and can contain CSS declaration values accepted by the custom function.

Function Names

The two-hyphen prefix identifies the function as author-defined. This naming convention provides a separate namespace for custom functions and prevents their names from conflicting with functions that may be defined by CSS.

--double()
--spacing()
--theme-color()
--fluid-size()

The function name used in a <dashed-function> refers to a custom function with the corresponding name.

Function Arguments

A dashed function can receive arguments that are used when the custom function is evaluated. Multiple arguments are separated by commas.

--double(20px)
--spacing(2)
--fluid-size(1rem, 3rem)

A comma-containing value can be passed as a single argument by enclosing that value in curly braces.

Using Custom Functions

Custom functions are defined with the CSS @function rule. A <dashed-function> calls the function and substitutes the result into a property value in a manner similar to how var() substitutes the value of a custom property.

A <dashed-function> can be used in places where var() is allowed. The function is evaluated and its resulting value is substituted before the property's final value is checked against the property's grammar.

<dashed-function> Example

The following example defines a custom function named --double() and then calls it from a property value:

@function --double(--value) {
  result: calc(var(--value) * 2);
}
.example {
  width: --double(100px);
}

In this example, --double(100px) is a <dashed-function>. The custom function evaluates the supplied argument and substitutes its result into the width property.

Specifications

The <dashed-function> data type is defined in the CSS Functions and Mixins Module .