css-vars-js

A css custom properties js/ts handler.

What are css custom properties ?

• Scope limited to selector (and optionnaly selector parents).
• Simple interaction with css vars via proxy.
• Existing css vars importation.

Install

npm install css-vars-js

import in web page

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

import in Node

import {CssVars} from 'css-vars-js';

Exemple:

css

.divs>div{
	/* ... */
	--border:5px;
	background-color: var(--background);
	height: var(--height);
	border: solid var(--border);
}

js

// import ... ;

// targets only '.divs>div' rule odd elements
let varz=new CssVars('.divs>div:nth-child(odd)',{
	background:'#ff0000',// create --background var
	height:'100px'// create --height var
})
// imports "border" var
.importVars(1);

let prop=varz.vars.background; // get --background current value for odd divs

varz.vars.background='#00ff00'; // change --background value for odd divs

varz.vars.border=5+'px'; // change --border value for odd and even divs

Do some theming :

// import ... ;
const themes={
	"A":{
		background:'#ff0000',
		height:'100px'
	},
	"B":{
		background:'#00ff00',
		height:'50px'
	}
};

// targets only declared rule odd elements
let varz=new CssVars('.divs>div:nth-child(odd)',themes.A);

varz.vars=themes.B;// change theme

---

Learn more :

• CssVars API documentation.
• CssVars demo
• demo source.