Creating a property inside of an object that can be continuously used
<p>I'm the type of person who loves to do a lot of projects especially if it involves only JavaScript since that is my strong point.</p>

<p>I thought of a little fun idea. Writing little pieces of CSS with JavaScript. These CSS pieces could then be used in a Blob or implemented into the webpage some other way.</p>

<p><code>Most of the time, I do projects just for FUN and for build up in experience.</code></p>

<p>Let's get more of a feel for what we are working with. One of these JavaScript stylesheets could look like this:</p>

<pre><code>var sheet = {
    "h1": {
        "font-size": "24px",
            "color": "blue",
        children: {
            "a": {
                "font-size": "15px"
            }
        }
    },
    "a": {
        color: "red"
    }
};
</code></pre>

<p>This would return: </p>

<p><code>h1{font-size:24px;color:blue}h1 a{font-size:15px}a{color:red}</code></p>

<p>Note the <code>children</code> propert in the <code>h1</code> element.</p>

<p>This is my way of nesting, making the <code>h1 a</code>.</p>

<p>My question however is, how could I make a continuous nesting so I could end up with something like:</p>

<p>"h1 div span a"</p>

<p>Meaning that each nested child will need be able to use the <code>children</code> property.</p>

<p>The script I have so far is below (belongs with the variable <code>sheet</code>). </p>

<pre><code>var to = "";
for (var el in sheet) {
    var props = [];
    for (var prop in sheet[el]) {
        if(prop != "children") {
            props.push(prop + ":" + sheet[el][prop]);
        }
    }
    to += el + "{" + props.join(";") + "}";
    //----
    if (sheet[el].children) {
        for (var el2 in sheet[el].children) {
            var props = [];
            for (var prop in sheet[el].children[el2]) {
                props.push(prop + ":" + sheet[el].children[el2][prop]);
            }
            to += el + " " + el2 + "{" + props.join(";") + "}"
        }
    }
    //----
}
</code></pre>

<p>The sections in between the comments is the code I use for the 1 time nesting. </p>

<p>I'm not sure how difficult this would be to add. But I understand that it probable wouldn't be easy.</p>

<p>My full example is here: <a href="http://jsfiddle.net/shawn31313/2tfnz/1">http://jsfiddle.net/shawn31313/2tfnz/1</a> </p>
