Using JSS with node.js

Download jss.js. Then "require" jss and use the JSS processor by calling its public method toCSS(inputstring [,scope]).

Here is the sample code for a simple JSS command line compiler:

var jss = require("./jss");

var stdin = process.openStdin();
stdin.on('data', function(chunk) {
process.stdout.write(jss.toCSS(chunk.toString()));
});

This code simply reads your JSS code from stdin and writes the generated CSS code to stdout.

If the above code is stored in a file tocss.js you can use it as follows:

node tocss.js <jss-file.jss >css-file.css

Injecting variables usable inside your JSS

The JSS module exports an additional method "addVars" taking an object with vars available to your JSS. Inside the above node-js code you can "inject" any JavaScript variables by adding them using jss.addVars().

Sample:

var jss = require("./jss");


jss.addVars({
width: 333,
padding: 20
})


var stdin = process.openStdin();
stdin.on('data', function(chunk) {
process.stdout.write(jss.toCSS(chunk.toString()));
});

You can now use this vars with namespace "JSS" and use JSS.width and JSS.padding inside your JSS:

h1: {

padding: JSS.padding,

width: JSS.width-JSS.padding

}

will produce

h1{

padding: 20px;

width: 313px;

}

Beyond the Scope ...

It is beyond the scope of this website to write and present a brilliant JSS to CSS building tool. We just provide the basic JSS processor. Its up to you to use jss.js inside your node.js environment to build CSS files. You can f. e. embed jss.js inside your web server application to accept http request to .jss resources and use jss.js to dynamically create CSS output. If you do this, your HTML then may contain something like this:

<link rel="stylesheet" href="my_styles.jss">