Skip to main content
Get Oxygen
Documentation/The Editor/Variables/Use In Custom CSS
The Editor

Use In Custom CSS

Every variable is available as a CSS custom property. In any CSS editing context in the
builder — an element's Custom CSS section, a CSS Code element — type -- and an
autocomplete appears listing your variables, grouped by collection, each with a preview of
its value. Selecting one inserts it wrapped in var() automatically (unless you're writing
a declaration that defines a custom property, where the bare name is inserted).

CSS variable autocomplete in the Custom CSS editor
CSS variable autocomplete in the Custom CSS editor

On the live site, variables are printed as custom properties on :root in a global
stylesheet that loads on every page — so they work anywhere, including in stylesheets and
plugins outside Oxygen.

One caveat worth knowing: builder bindings track a variable by its ID and survive a
rename, but a var() reference you typed by hand does not. Rename freely in the builder;
rename carefully once a variable is referenced in code.