Properties of Elements Exposed via CSS Variables

Varsity is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:

By default, Varsity will reprocess selectors by watching the following events:

To run Varsity whenever you want, use the varsity() function in JS.

To have varsity watch an element, you need to give that element a unique identifier, as well as add the data-varsity attribute. The plugin will use either the value of the data-varsity attribute, or else the value of the id (if defined) for an element.

<div id=example data-varsity></div>

<!-- or -->

<div data-varsity=example></div>

Once the plugin is aware of an element to watch, and the unique name of that element, it will make the above values available in the following format: --name-value, for example:

Techniques Capable