Ever wanted nested stylesheets?

I have!

Now you can have them! If you code your stylesheets as JSON and parse them using JSS 0.1. You could have the following:

JSS({
'html': {
'body': {
background: '#fff',

'div#header': {
height: '100px',
background: '#00f'
},

'div#footer': {
height: '40px',

'span#copyright': {
color: '#0f0'
},
'span#testing': {
color: 'black',
background: '#eeccff'
}
}
},
width: '800px'
}
});
Turned into:

html {
width: 800px;
}

html body {
background: #fff;
}

html body div#header {
height: 100px;
background: #00f;
}

html body div#footer {
height: 40px;
}

html body div#footer span#copyright {
color: #0f0;
}

html body div#footer span#testing {
color: black;
background: #eeccff;
}

Check out the blog post for a demo and a zip file containing the demo, full version and minified version.