css-vars-js
v1.0.6
Published
A css vars js/ts handler.
Downloads
11
Maintainers
Readme
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.