I recomend using SASS/SCSS for creating insteadof this library. But, if for some reason you wish to create CSS in JavaScript this library might help.
-
style: AProxyfor adding/removing styles in a block.Example
let mydiv = new JSCSS('#mydiv'); // Add styles mydiv.style.color = 'blue'; mydiv.style.padding = '0.8em 1.2em'; mydiv.style['box-shadow'] = '0 0 3px black'; // Multi-valued properties can be assigned using arrays mydiv.style.background = [ '#844af0', '-webkit-gradient(linear, left top, left bottom, from(#844af0),to(#6d2de3))', 'linear-gradient(to bottom, #844af0 0%,#6d2de3 100%)' ]; // Remove style delete mydiv.style.background;
-
selectors: A stringSetfor adding and removing selectors in a block. See Set MDN for more details on sets.Example
let highlight = new JSCSS; // Add selectors highlight.selectors.add('div.bold'); highlight.selectors.add('span.bold'); // Remove selector highlight.selectors.delete('div.bold'); // All the other Set functions are supported (like: has, entries etc.)
-
child: AProxyfor adding/removing sub-blocks. Sub-blocks act in a manner similar to that in SCSS./*SCSS*/ #mydiv { color: blue; button { color: black; } }
When compiled to CSS becomes
/*CSS*/ #mydiv { color: blue; } #mydiv button { color: black; }
childis used to achieve the same result in JSCSS.Example
let mydiv = new JSCSS('#mydiv'); mydiv.style.color = 'blue'; mydiv.child.btn = new JSCSS('button'); mydiv.child.btn.style.color = 'black'; //A more easily readable way to do this will be let mydiv = new JSCSS('#mydiv'); mydiv.style.color = 'blue'; mydiv.child.btn = new JSCSS('button').addStyles({ color: 'black' }); // Or let mydiv = new JSCSS('#mydiv'); mydiv.style.color = 'blue'; { let btn = new JSCSS('button'); btn.style.color = 'black'; mydiv.child.btn = btn; } /* When rendered this code will produce: #mydiv { color: blue; } #mydiv button { color: black; } */
-
styleElement: A read-only reference to a<style>element containg the rendered CSS.Example
let mydiv = new JSCSS('#mydiv').addStyles({ color: 'white', background: '#212121' }); document.head.appedChild(mydiv.styleElement);
-
spaceFromParentSelector: A boolean value. Default value istrue. This determines if a space will be added between this block's selector and its parent block's selectors.Example
let buttons = new JSCSS('button', 'input[type="button"]').addStyles({ color: 'white', background: '#212121' }); buttons.child.hover = new JSCSS(':hover').addStyles({ background: 'blue' }); buttons.child.active = new JSCSS(':active').addStyles({ background: 'darkblue' }); /* The above code will render: button, input[type="button"] { color: white; background: #212121; } button :hover, input[type="button"] :hover { color: blue; } button :active, input[type="button"] :active { color: darkblue; } Which is not what we intened. */ // So we must disable the space between the child block selector (:hover, :active) and the parent selector (button, input[type="button"]) buttons.child.hover.spaceFromParentSelector = false; buttons.child.active.spaceFromParentSelector = false; /* Now the rendered code will be what we intended: button, input[type="button"] { color: white; background: #212121; } button:hover, input[type="button"]:hover { color: blue; } button:active, input[type="button"]:active { color: darkblue; } */
-
toString(): Get the CSS string.Example
let mydiv = new JSCSS('#mydiv').addStyles({ color: 'blue' }); console.log(mydiv.toString()); /* Logs: #mydiv { color: blue; } */
-
addStyles(object [, ... object]): Add multiple styles.Example
let mydiv = new JSCSS('#mydiv').addStyles({ color: 'white', background: '#212121' }, { border: 'none' }, { 'font-size': '1.2em'});
-
reRender(): Update the CSS in the block's<style>element node. -
deleteStyles(): Removes all the styles from block. -
copyStylesFrom(jscssObj): Remove all current block styles and then copy styles from the passed block. -
mergeStylesFrom(jscssObj): Merge styles from passed block into current block. -
unlinkFromDOM(): If block's<style>element has been added in the document then it is removed from the document.