Using CSS Variables

CSS variables (also commonly referred to as CSS custom properties or cascading variables), are a useful tool to handle style values shared across many dashboard components.

In CSS, cascading variables are entities defined by a user that contain specific values to be reused throughout a document.

A CSS variable is declared using a custom name that begins with a double hyphen ( -- ), and a value that can be any valid CSS value:

--variableName: value;

To access the variable value, add its name as a var() function argument to the CSS property you want to apply:

property-name: var(--variableName);

Also, it is a good practice to add a fallback property value(s) after a variable name, separated by comma ( , ), in case the variable is not yet defined.

property-name: var(--variableName, fallback-value);

A declared variable is accessible within the scope of the selector given with the ruleset it is used in. If you define a variable as a plain CSS property in a component’s properties, it will be available to use in all nested components.

Commonly, CSS variables are declared with the :root pseudo-class selector to be accessible from any place in the document. To use them in that way in dashboards, add your variables to the Root Panel’s Element CSS Style property straight without any selectors.

A variable value can be redefined at the place of use. It might be handy if you want to apply another value within the subset of nested elements, but don’t want to create a separate variable for this special case. To do this, just re-declare the variable in the rule you’re going to use a new value in. The variable will have the new value for all matching elements and their descendants.

Using CSS Variables in a Dashboard

Depending on the case, you may want to use CSS variables locally within a certain UI component, but the most common case (and their true power) is to be able to access them globally across the dashboard:

  1. In the UI Builder, open the dashboard’s Root Properties Editor by clicking on it in the Component Tree.

  2. In the Properties Editor, switch to the Element Style tab.

  3. In the Element Style tab, declare the variable in the Element CSS Style property:

--fancyShadow: rgba(40, 40, 80, 0.24) 0px 12px 40px -6px, rgba(0, 0, 0, 0.4) 0px 8px 24px -8px, rgba(16, 32, 64, 0.64) 0px 0px 0px 2px inset;

  1. Add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to a tab containing a custom style property.

  1. In the opened tab, add the CSS styles to the local custom style property:

box-shadow: var(--fancyShadow);

  1. The style with the variable value is applied once the field is out of focus, and the result is visible on the dashboard.

You can redefine default CSS variables that come with Iotellect web UI if you’re planning to make global changes to the properties they handle.

To access the list of declared variables, scroll down the Style tab of the browser developer tools until you see the rule with the :root selector listing all the default variables in it.

Was this page helpful?