script-style

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