Variables & CollectionsVariablesManaging Variables

Get CSS name

variable.getCSSName()

Returns the custom property name of a variable (e.g., --primary).

This is distinct from variable.getBinding(), which returns the variable wrapped in a var() function (e.g., var(--primary)). Use getCSSName() when you need a reference to the variable’s name, for example, to override its value in a custom stylesheet.

Syntax

1variable.getCSSName(): Promise<string>

Returns

Promise<string>

A Promise that resolves to the variable’s CSS name.

Example

1// Create a variable
2const webflowBlue = await collection?.createColorVariable(
3  "blue-500",
4  "#146EF5"
5);
6
7// Get the CSS name for the variable
8const cssName = await webflowBlue.getCSSName();
9// cssName = "--blue-500"

Designer ability

Designer AbilityLocaleBranchWorkflowSitemode
canReadVariablesAnyAnyAnyAny