Why isn't CSS nested?
I guess it's not supposed to be used as a nested style system really, otherwise it would already be like that... Wouldn't it?, but I like the idea of it being nested, so now it can be!
This script parses JSON of nested CSS and returns or applies CSS to the page.
For example:
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'
}
});
would become:
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;
}
or optionally passing an option of minified: true (which is the default behaviour), this:
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:#000;background:#ecf;}
which replaces 6 char hex codes with 3 char codes where applicable, oh and shortening longer colour names if possible.
To use, first add the jss.js (or jss-min.js) to your document, probably in the <head> and then add another <script> line linking to a JS file like this:
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'
}
});
Done!