# Use functions in variables

> Use functions in variables

Variables now support using a set of CSS functions in their values, allowing you to create more flexible and dynamic design tokens.

Webflow supports the following [CSS functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#math_functions) in variables:

| Function      | Purpose                                 | Example                                         |
| ------------- | --------------------------------------- | ----------------------------------------------- |
| `calc()`      | Perform mathematical calculations       | `calc(100vh - var(--header-height))`            |
| `clamp()`     | Create fluid values with min/max bounds | `clamp(1rem, 5vw, 3rem)`                        |
| `min()`       | Use the smallest of multiple values     | `min(50%, 300px)`                               |
| `max()`       | Use the largest of multiple values      | `max(100px, 20%)`                               |
| `color-mix()` | Blend colors together                   | `color-mix(in srgb, var(--primary) 75%, white)` |

### Custom values

To use functions in variables, you need to create or set them as custom values. All variable creation methods accept a `CustomValue` object as the value parameter, and the `variable.set()` method can also update variable values with custom values. For the custom values object, the `type` property is always `"custom"` and the `value` property is a string containing the CSS function.

**CustomValue type**

```typescript
type CustomValue = {
  type: "custom";
  value: string;
};
```

<Tabs>
  <Tab title="Create a custom value" id="createCustomValue">
    {/* <!-- vale off --> */}

    ```typescript
    // Get collection
    const collection = await webflow.getDefaultVariableCollection()

    // Create a Color Variable
    const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

    // Create a Color Variable with a custom value
    await colorVariable.set({
        type: "custom",
        value: `color-mix(in srgb, #146EF5, white 75%)`
    });
    ```
  </Tab>

  <Tab title="Set a custom value" id="setCustomValue">
    ```typescript
    variable.set({
        type: "custom",
        value: "clamp(1rem, 2vw, 2rem)"
    });
    ```

    {/* <!-- vale on --> */}
  </Tab>
</Tabs>

### Reference variables in functions

When using functions, you can reference other variables using the `var()` syntax. This allows you to create dynamic relationships between your design tokens. To dynamically get this syntax, use the new [`getBinding()`](/designer/reference/get-variable-binding) method on a variable.

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection()

// Create a Color Variable
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")

// Get the binding for the variable
const binding = await colorVariable.getBinding()

// Create a Color Variable with a custom value
await colorVariable.set({
    type: "custom",
    value: `color-mix(in srgb, ${binding}, white 75%)`
});
```

### Getting the value of a custom variable

To get the value of a custom variable, add the `customValues` property as an optional parameter to the `variable.get()` method.

```typescript
const myValue = await colorVariable.get({
    customValues: true
})

console.log(myValue)
// Returns a CustomValue object
// {
//     type: "custom",
//     value: "color-mix(in srgb, #146EF5, white 75%)"
// }
```

<Warning>
  Using `variable.get()` without setting `customValues: true` will throw an error if the variable has a custom value. It's recommend to always setting `customValues: true` when getting the value of a variable.
</Warning>