Caesar is a helper library to manipulate CSS Variable like JavaScript Object.
npm install @realdennis/caesarCaesar is a developer-friendly library for CSS3 variables get & set.
- Set CSS variables by caesar.assign method like Object.assign.
- Get CSS variable value by name using caesar.query.
``sh`
$ npm install @realdennis/caesar
or script tag
`html`
Only two methods caesar.assign & caesar.query & caesar.queryOne, the below is usage.
`javascript
import * as caesar from '@realdennis/caesar';
const el = document.querySelector('div.container');
caesar.assign(el, {
duration: '2s',
delay: '1.5s',
height: '20px'
});
/* Now the container style would be like below
** div.container{
** --duration: 2s;
** --delay: 1.5s;
** --height: 20px;
** transition-delay: var(--duration);
** }
**
*/
const { duration, height } = caesar.query(el, ['duration', 'height']);
const { delay } = caesar.queryOne(el,'delay');
console.log(duration); // "2s"
console.log(height); // "20px"
console.log(delay); // "1.5s"
`
- When variable does not exist, it'll return empty string (default value is '').
- Caesar CANNOT get the initial CSS variable value in stylesheet.
- Each query return would be string type, though you assign in number type.
example:
`javascript`
caesar.assign(el, {
containerTop: 20,
containerBottom: 10
});
const { containerTop:top } = caesar.query(el, ['containerTop']);
console.log(typeof top); // string
- If you are using typescript and querySelector, it'll get Element type, please type assertion as HTMLElement`.
- Full document will coming soon...
---
LICENSE MIT © 2019 realdennis