nested css – dom.hastin.gs

Tue 28th Jul 2009Thu 30th Jul 2009

JSS 0.2 – Nested CSS update

So I thought I’d update the JSS script I wrote previously with a few changes I’ve been thinking about for a while.

The primary reason for the update is to add a new ‘non-CSS’ property of ‘include’. This property allows you to include styles that have already been defined in the current class. Continue reading “JSS 0.2 – Nested CSS update”

Fri 1st May 2009Tue 28th Jul 2009

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.