Skip to main content

CSS Variables

info

Setting location:

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

Overview​

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.