Skip to content

Instantly share code, notes, and snippets.

@marthakelly
Created July 3, 2012 01:56
Show Gist options
  • Select an option

  • Save marthakelly/3037040 to your computer and use it in GitHub Desktop.

Select an option

Save marthakelly/3037040 to your computer and use it in GitHub Desktop.

Revisions

  1. Martha Kelly created this gist Jul 3, 2012.
    31 changes: 31 additions & 0 deletions data-structure
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    [
    {
    "indentLevel": 0,
    "selector": "body",
    "declarations": [
    " margin: auto",
    " width: 1000px"
    ],
    "children": []
    },
    {
    "indentLevel": 0,
    "selector": "#divID",
    "declarations": [
    " font: 12px Helvetica, Arial, sans-serif",
    " color: green",
    " background: yellow"
    ],
    "children": [
    {
    "indentLevel": 1,
    "selector": ".className",
    "declarations": [
    " color: blue",
    " width: 500px"
    ],
    "children": []
    }
    ]
    }
    ]
    27 changes: 27 additions & 0 deletions recurse-through-data-structure
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    var blockToCSS = function blockToCSS(block) {
    var beginBlock = " {" + "\n",
    endBlock = "\n" + "}",
    output = [],
    sel,
    dec,
    block,
    parentCSS;

    sel = block.selector + " ";
    dec = block.declarations.join("; \n") + ";";
    parentCSS = sel + beginBlock + dec + endBlock;

    if (!block.children.length) {
    return [parentCSS];
    } else {
    var childrenCSS = block.children.map(blockToCSS).reduce(function(acc, children) {
    return acc.concat(children);
    });
    var prefixedChildrenCSS = childrenCSS.map(function(child) {
    return sel + child;
    });
    prefixedChildrenCSS.unshift([parentCSS]);

    return prefixedChildrenCSS;
    }
    };