Cascading JS Variables
Cascading JS Variables let CSS authors include cascading variables in the stylesheets they write.
What does it mean for a variable to 'cascade'? In this case it means variable assignments are inherited globally, but can be reassigned for individual elements and children of those elements differently. Another feature of cascading variables is their ability to change in value (responsively via CSS, or via JS) in different situations making them a very flexible tool for the expression of dynamic values with a straightforward notation inside CSS.
The syntax supported by this plugin for assigning and using a variable is the same as the syntax for native CSS variables. Each variable name is represented by a property name beginning with two hyphens:
--. To reference the value of a variable inside CSS values, use the function
var() with the name of the variable between the brackets.
This plugin also allows HTML authors to assign cascading variables by defining a custom data attribute beginning with
data- and followed by the variable name, with the desired variable value set as the value of the attribute in HMTL.
selectoris a CSS selector
ruleis a semicolon-separated list of CSS property declarations
To set the variable
green we can accomplish that a few ways:
cascadingVariables(':root', '--example: green;')
This would have the effect of setting the following attribute on the HTML tag:
Which could also be achieved in HTML by writing:
Or added programmtically via JS at any point with something like:
green for the variable:
cascadingVariables(':root', 'background: var(--example);')
- Website: https://tomhodgins.github.io/cascading-js-variables
- Demo: https://tomhodgins.github.io/cascading-js-variables/tests/demo.html
- Author: Tommy Hodgins
- License: MIT