VARIUS

JS Properties for Elements as CSS Variables

The idea of Varius is to use JavaScript to expose properties of elements (like offsetWidth, innerHTML.length, children.length, and even things like window.innerWidth to CSS through CSS variables. Since CSS variables are scoped at the level of each element we are able to write simple CSS that is 'scoped' to the state of each individual element they apply to as it currently appears in the browser.

The full list of available variables you can use in your CSS is:

Global Variables

• innerWidth
• innerHeight

Scoped Variables

• offsetWidth
• offsetHeight
• offsetLeft
• offsetTop
• scrollWidth
• scrollHeight
• scrollLeft
• scrollTop
• children
• characters
• value

View VARIUS on Github: github.com/tomhodgins/varius

Using value.length as a variable

Using offsetWidth as a variable

Using children.length as a variable