Variables let you reuse colors, spacing values, font families, and other values throughout a site. Change the variable once and every style that uses it receives the new value.
Breakdance outputs variables as CSS custom properties and makes them available in compatible style controls.
Click the three-dot menu in the builder’s top bar, then choose Variables.
Variables are organized into collections. Collections only organize the panel; they do not change how a variable works on the page.
Breakdance includes five variable types:
The type controls where the variable can be used. For example, a Color control lists Color variables rather than variables created for unrelated value types.
Open a selector and find the style control you want to connect. Click the variable button beside that control, then choose a variable in the Variables popup.
The control now uses the variable instead of a value stored directly on the selector. You can reopen the popup to choose another variable. The popup also includes an option to create a variable without leaving the control you are editing.
You can replace a variable’s value on one element and its contents without changing the global definition.
Breakdance writes the override on the selected element. Elements inside it inherit that value unless a closer descendant sets another override.
The Variables panel lets you search, rename, reorder, and delete variables and collections. You can also copy a variable’s CSS name, review variable history, and import or export variables. An import can merge with the current variables or replace them.
