README
Script-Style
CSS, but not quite. Intelligent JS-powered alternative to pure CSS, using JSON objects to dynamically set properties.
Examples
Instead of:
h1{
font-family: sans-serif;
font-size: 3rem;
color: rgb(0, 0, 0);
}
p{
font-family: sans-serif;
font-size: 1rem;
color: rgb(76, 76, 76);
}
Script-Style lets you do:
var scriptstyle = new ScriptStyle();
scriptstyle.render([
{
selector:"h1",
rules:{
fontFamily: "sans-serif",
fontSize: "3rem",
color: "rgb(0, 0, 0)"
}
}
]);
scriptstyle.render([
{
selector:"p",
rules:{
fontFamily: scriptstyle.Computed("h1","font-family").value, //Set font-family to computed font-family for first h1
fontSize: scriptstyle.Style("h1","font-size").UnitChange("rem",-2), //Set font-size to 2 less than DOM font-size for h1s
color: scriptstyle.Computed("h1","color").ColorChange(+30) //30% more than computed colour for h1
}
}
]);
Documentation
You can find Script-Style on readthedocs.io: Documentation