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";

Features:

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="https://cdn.rawgit.com/colxi/css-var/master/css-var.js"></script>

3- Install it using npm and dynamically import it. (unsafe! Not available in all browsers)

$ npm install css-var-helper

import("./css-var.js")

Once he library is attached/imported with any of the previous methods, the global Object cssVar will be available, and ready for usage!

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'] );

Example

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

style.css

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

body{
    /* Body background color will be set by the CSS variable --primaryColor */
    background-color: var(--primaryColor);
    /* Some extra styling ... */
    text-align:center;
    margin: 0;
    height: 100%;
    cursor:pointer;
}

div{
    /* 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%;
}

demo.js

// 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);

index.html

<html>
    <head>
         <script src="https://cdn.rawgit.com/colxi/css-var/master/css-var.js"></script>
         <link rel="stylesheet" href="./style.css" />
         <script src="./demo.js"></script>
    </head>
     <body>
        <div>Randomize!</div>
     </body>
 <html>

Keywords

FAQs

What is css-var-helper?

Is css-var-helper popular?

Is css-var-helper well maintained?

Package last updated on 23 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

css-var-helper