JSS – Nested CSS using Javascript

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.