Your browser also supports JavaScript. So why not use JSS directly in your browser.

You can do that by dynamically creating <style> elements with JSS-processed content.

Download jss.js and include the JSS processor (accessable via JSS.toCSS()) in HTML head:

<script type="text/javascript" src="jss.js"></script>

Then add something like the following code to your sites:

/*
* utility to inject <style> element in html head section
*/
function createStyle(css){

var head = document.getElementsByTagName("head")[0];
var style_el = document.createElement("style");
head.appendChild(style_el);

if(style_el.styleSheet){// IE
style_el.styleSheet.cssText = css;
}
else {// w3c
var style_content = document.createTextNode(css)
style_el.appendChild(style_content);
}
}

/*
* create the CSS (as text) from a JSS object
*/
var css = JSS.toCSS({

"#test": {
font_size: "200%",

color: "white"

}

})

// now paste it into HTML HEAD section:
createStyle(css)

Injecting variables usable inside your JSS

The JSS module exports a method JSS.addVars(Object) taking an object with vars available to your JSS. Use the following code to "inject" JavaScript variables by using JSS.addVars() accessable with namespace "JSS" in your JSS code:

JSS.addVars({
height: 50
});
var css = JSS.toCSS({

"#test": {

height: JSS.height

}

});

Live test

click here to add styles to #test.

#test