CSS Variables
Active CSS allows the dynamic setting of CSS variables based on events.
CSS variables give a means to "variablize" CSS style values, so that when maintaining or changing CSS you only have to change a style value once rather than changing it in multiple places inside a stylesheet. You can just assign a certain color or property to a variable and use it in multiple places in your stylesheet. See the CSS from the code editor to see a useful use of these. All the colors used in the code editor are at the top of the stylesheet and can be tweaked from one place. It saves time and makes the code look a bit more organised.
CSS variable names start with "--" and they only contain style properties. They don't have curly brackets. You use the CSS var() command when you need to use them in CSS. See here for a good description of the CSS var() command.
Note: CSS variables are not Active CSS variables. You cannot use CSS variables in var commands or anywhere else that you would use Active CSS variables, yet. But you can use Active CSS variables to set CSS variable values.
Active CSS variables have an completely different syntax to CSS variables. The "--" use as a CSS variable prefix is not compatible with JavaScript because "--" is a decrement operator in JavaScript and Active CSS has to look more like JavaScript and do things like equations, hence the syntax in Active CSS looks different to CSS.
This page gives examples of how to use CSS variables with Active CSS.
Setting CSS variables in Active CSS follows the exact same syntax as CSS with the difference being that the target selector is affected dynamically when an event occurs.
The :root and :host target selectors used below can only be used for setting CSS variables - nothing else.
Basic setting of a CSS variable to the :root (document) scope:
Basic setting of a CSS variable to a :host (shadow DOM) scope:
Basic setting of a CSS variable to a target selector scope: