WARNING : This package has been deprecated and replaced by an improved implementation, with a better approach. New package name : css-global-variables (Available here)
[DEPRECATED] css-var-helper : CSS3 Variables Manipulation with JS (ES6)
cssVar helper provides easy manipulation of your GLOBAL (:root) CSS3 variables, simplifying the templating related scenarios & tasks, through a natural interface:
// set the CSS global --myVariableName value to "myVariableNewValue"cssVarmyVariableName = "myVariableNewValue";
- All your CSS global (:root selector) variables are stored in the cssVar Object as properties. Any change on them will be instantly reflected into the CSS realm.
--variable name prefix , is not required when setting or getting variables using
cssVar. It is included automatically by the library when not explicitly set. This provides a more natural & fast coding experience. (However is still required on the CSS realm)
- Automagically detects any new CSS attachment in the document, performed after the initial load.
cssVaronly operates with Global (:root) CSS Variables. Any definition/overwritting done inside another CSS selector will not be detected, and could affect the proper behavior of cssVar.
cssVarlibrary is loaded into the document, can generate a small delay, if the document has extensive CSS definitions.
1- Clone the repository locally, and attach the library to your Html document
2- Use the online delivery network
3- Install it using npm and dynamically import it. (unsafe! Not available in all browsers)
$ npm install css-var-helper
Once he library is attached/imported with any of the previous methods, the global Object
cssVar will be available, and ready for usage!
cssVar Object behaves as a regular Js Object. Any regular Object operation can be performed in
cssvar. We are going to focus here, only in the most useful and interesting ones : enumeration , getters , setters
Enumerate all declared CSS3 global variables iterating the cssVar Object :
forlet v in cssVarif cssVar console;
Set a new value to a CSS3 Global variabe :
/* The following assigments behave equally, and are all valid */cssVarmyVariable = 'newValue';cssVar'myVariable' = 'newValue';cssVar'--myVariable' = 'newValue';
Get the value of a CSS3 Global variabe :
/* The following value retrievals behave equally, and are all valid */console;console;console;
The following example (available in ./demo), randomizes the background color, and the font size, each time receives a click. You can test it here
// on document ready...document;