Style variables are a powerful way to customize the appearance of your app. They allow you to define and reuse values for properties such as colors, fonts, sizes, etc. across different components and boards. Codux supports both CSS Custom Properties (CSS variables) and preprocessor variables (Sass, Stylable).

The Global Variables panel allows you to easily view, edit, and create style variables in your project. It displays all available variables with their current values, enabling you to edit them in real-time. You can also see how variables are organized across different files and within various CSS selectors, providing a clear overview of your project's variable structure.

To add a variable in the Global Variables panel, select the + button near the selector name to add it to. You will need to have a selector in your CSS file with at least one variable before you can add new variables to it from the panel (see above).

When a board is open, you can jump directly to where's a variable is defined in the code drawer as seen above.

Once your variables are set up and recognized by Codux, you can easily apply them while styling components. Select an element to style, and in the Styles panel, choose a variable from one of the color pickers.