Using Style Variables in Codux

Style variables let you save colors, fonts, sizes, and other design elements in one place. When you change a value in the Global Variables panel, it updates everywhere in your app automatically. Codux supports both CSS variables and preprocessor variables like those used in Sass and Stylable.

The Global Variables Panel 

The Global Variables panel lets you see and edit all your project's variables in one place. The panel organizes them by file and selector, making it easy to find and update values.
Important!
To add new variables, you'll need at least one selector with a variable in your CSS file. If the panel isn't showing your files, first configure your common CSS files or add variables to your project.
Refer here for information on working with common styles in Codux.

Creating Variables 

To add a variable in the Global Variables panel:
  1. Click "+" next to any selector.
  2. Choose what type of variable (text or color).
  3. Name it and set its value.
  4. Click Create to save it.

Using Variables in Your Design 

Once you've created variables, here's how to apply them to your elements:
  1. Select any element.
  2. Find the property you want to change in the Styles panel.
  3. Pick your variable from the dropdown.
  4. See it update everywhere at once.

Organizing Your Variables 

Keep your variables tidy and easy to find with these tips:
  • Group related variables together
  • Use clear names that describe their purpose
  • Add fallback values for backup
  • Keep notes about what each variable is for

Under the Hood 

Variables are stored in your CSS like this:
1
2
3
4
:root {
 --brand-blue: #3498db;
 --page-margin: 24px;
}
IN THIS ARTICLE
Previous article
Next article