Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including css-var-helper with all npm packages installed. Try it out:

var cssVarHelper = require("css-var-helper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

css-var-helper v0.1.1

Provides easy manipulation of the Global CSS variables in the Browser

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)

The 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"
cssVar.myVariableName = "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.
  • The -- 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.

Limitations :

  • cssVar only 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.
  • When cssVar library is loaded into the document, can generate a small delay, if the document has extensive CSS definitions.

Installation :

1- Clone the repository locally, and attach the library to your Html document

<script src="path/to/css-var.js"></script>

2- Use the online delivery network

<script src=""></script>

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!


The 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 :

for(let v in cssVar){
    if ( cssVar.hasOwnProperty(v) ) console.log(v);

Set a new value to a CSS3 Global variabe :

/* The following assigments behave equally, and are all valid */
cssVar.myVariable = '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.log( cssVar.myVariable );
console.log( cssVar['myVariable'] );
console.log( cssVar['--myVariable'] );


The following example (available in ./demo), randomizes the background color, and the font size, each time receives a click. You can test it here


    /* declaration of some CSS3 global variables */
    --primaryColor : #F2A2BB;
    --textSize : 12;

    /* Body background color will be set by the CSS variable --primaryColor */
    background-color: var(--primaryColor);
    /* Some extra styling ... */
    margin: 0;
    height: 100%;

    /* The size of the text is set by --textSize */
    /* Trick : Multiplying * 1px the value of th var, will add the needd "px" sufix */
    font-size: calc( var(--textSize) * 1px );
    /* Some extra styling ... */
    position: relative;
    top: 50%;


// on document ready...
document.addEventListener('DOMContentLoaded', function(){
    // ...attach click event to te body
    document.body.addEventListener('click', function(){
        /* Generate and assign random color */
    cssVar.primaryColor = '#'+Math.random().toString(16).substr(-6);
    /* Generate and assign random size, betwen 15 and 45 */
    cssVar.textSize = Math.floor( Math.random()*30 + 15 );
} , false);


         <script src=""></script>
         <link rel="stylesheet" href="./style.css" />
         <script src="./demo.js"></script>


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free