Skip to main content

CSS Variables


Setting location:

  • Global Settings - Yes
  • Template Settings - Yes
  • Module Settings - Yes


CSS custom properties (variables) are special CSS properties, customly created on demand and prefixed with --.

Similar to data variables, CSS variables exist on different layers:

  1. local variables - scoped within a module
  2. global variables - those are created in template or global settings

There are many types of CSS variables. Probably there most useful would be the one caleld "any-value". This is where we could input any value, including CSS functions, and expect it to work.

Pro tip!

Use "any-value" CSS variable to insert CSS functions (e.g. calc(), clamp() etc) and use inside CSS settings!

How to use

CSS vars UI

This is an example of created CSS variables.

CSS vars UI

This is how we can use CSS variables inside CSS settings.

  1. Click on @ icon opens a select with all CSS variables available
  2. The select with all available CSS variables

We can also notice there is a fallback for the setting. It can be created by using regular setting's fields.

Pro tip!

Use regular setting's fields to add a fallback. If the CSS variable is not available, the fallback will be used, so styles are always available.