Geek asks and answers

Creating a property inside an object that you can constantly use

I am the type of person who likes to do a lot of projects, especially when it comes to JavaScript only, as this is my forte.

I thought of a little funny idea. Writing small CSS snippets using JavaScript. These parts of CSS can then be used on Blob or implemented on a web page differently.

Most of the time, I do projects just for FUN and for build up in experience.

Let us get more from what we work with. One of these JavaScript style sheets might look like this:

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

This will return:

h1{font-size:24px;color:blue}h1 a{font-size:15px}a{color:red}

Pay attention to the property childrenin the element h1.

This is my way of nesting when creating h1 a.

My question, however, is how can I create continuous nesting so that in the end I can get something like:

"h1 div span a"

, children.

script ( sheet).

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(";") + "}"
        }
    }
    //----
}

- , .

, . , .

: http://jsfiddle.net/shawn31313/2tfnz/1

+5
3

:

function buildCSS(stub, node){
    var to = "";
    for (var el in node) {
        var rule = stub + " " + el;
        var props = [];
        for (var prop in node[el]) {          
            if(prop != "children") {
                props.push(prop + ":" + node[el][prop]);
            }
        }
        to += rule + "{" + props.join(";") + "}";
        if (node[el].children) {
            to += buildCSS(rule, node[el].children);
        }
    }

    return to;
}

var to = buildCSS("", sheet);

, .

http://jsfiddle.net/2tfnz/3/

, :

var sheet = {
    "h1": {
        rules: {
            "font-size": "24px",
            "color": "blue"
        },
        children: {
            "a": {
                rules: {
                    "font-size": "15px"
                }
            }
        }
    },
    "a": {
        rules: {
            color: "red"
        }
    }
};

, children , .

+2

http://jsfiddle.net/2tfnz/6/

, , . children, descendant CSS.

var sheet = {
    "h1": {
        "font-size": "24px",
        "color": "blue",
        children: {
            "a": {
                "font-size": "15px",
                descendants: {
                    "span": {
                        "font-weight": "bold"
                    }
                }
            }
        }
    },
    "a": {
        color: "red"
    }
};

function toCSS(obj, pre) {
    var str = '', pre = pre || '';

    for (var selector in obj) {
        str += pre + selector + ' {\n';

        var rules = obj[selector];
        for (var ruleKey in rules) {
            if (['descendants', 'children'].indexOf(ruleKey) > -1) continue;
            str += '  ' + ruleKey + ': ' + rules[ruleKey] + ';\n';
        }

        str += '}\n\n';

        if ('descendants' in rules) str += toCSS(rules.descendants, pre + selector + ' ');
        if ('children' in rules) str += toCSS(rules.children, pre + selector + ' > ');
    }

    return str;
}


console.log(toCSS(sheet));
+1

I like your boyfriend. However, I said the idea of ​​making my code recursive.

So I did:

        var to = "";
        for (var el in sheet) {
            var props = [];
            var nest = [el];
            var nestLookUp = {
                    "children": ">", 
                    "desendents": ""
            };
            var nests = /children|desendents/;
            var addNest = function (shh) {
                for (var found in nestLookUp) {
                    if (shh.hasOwnProperty(found)) {
                        for (var el2 in shh[found]) {
                            var props = [];
                            nest.push(nestLookUp[found]);
                            nest.push(el2);
                            for (var prop in shh[found][el2]) {
                                if (!prop.match(nests)) {
                                    props.push(prop + ":" + shh[found][el2][prop]);
                                }
                            }
                            if (props.length > 0) {
                                to += nest.join(" ").replace(/\s{2}/, " ") + "{" + props.join(";") + "}";
                            }
                            addNest(shh[found][el2]);
                            nest.pop();
                            nest.pop();
                        };
                    }
                }
            };
            for (var prop in sheet[el]) {
                if (prop != "children") {
                    props.push(prop + ":" + sheet[el][prop]);
                }
            }
            to += el + "{" + props.join(";") + "}";
            addNest(sheet[el]);
        }

@Trevor - Your idea with descendantsis good :)

My code is a bit longer than Trevors, but personally more manageable. (39 lines of his 20)

I usually like to make my own code, because I usually understand how the code works.

Ha, I was a little confused looking at you guys code.

0
source

More articles:


All Articles