JSS – Nested CSS using Javascript

dom111 — Fri, 01 May 2009 13:37:46 +0000

Update: I have worked on a newer version with more features and a PHP conversion, here.

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;
      }

You can get it here or view the test page here.

dom111.co.uk » stylesheet

JSS – Nested CSS using Javascript