Variables are the next workflow for the extended functionality of your site. Variables can be used together with class system and Interaction layers
While classes can be used to add a set of styles to a block. Variables are good for setting specific common values to separate options. For example, you find that you use 20px padding very often on your site. Then, instead of doing this again and again, you can set the global variable as 20px and select it in different fields on page. Later, you may decide that 20px is too small or big and you want to increase this value. Instead of editing each block, you can change the global variable.
But this is not the only benefit of variables. Another benefit – they can include other variables (unlimited nested variables). And they are inheriting from the parent block.
For example, you can set something like
body{--colorbtn:red}
body.darkbody{--colorbtn:white}In the regular body, your color will be red, but if the page has a dark body class, the color will be changed.
Global variables can be set via Stylebook and dynamically set by Interaction layers
GS plugin has a set of default variables, but you need to enable them first. For this, you need to click in the Stylebook button “Restore Default” and save
Not all fields support variables, but all fields with unit controls do this
Text inputs support variables by default and you can type something like var(–btncolor) in inputs. If the text field supports a variable selector, then you will see a violet dot near the field. If the unit field supports variable selector, you can see an arrow down in the field input
