5

私は多くのプロジェクトを行うのが好きなタイプです。特に JavaScript のみが含まれる場合は、それが私の強みです。

ちょっと面白いアイデアを思いつきました。JavaScript を使用して小さな CSS を作成します。これらの CSS ピースは、Blob で使用したり、別の方法で Web ページに実装したりできます。

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

私たちが取り組んでいることをもっと感じてみましょう。これらの JavaScript スタイルシートの 1 つは、次のようになります。

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

これは以下を返します:

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

要素のchildrenプロパティに注意してください。h1

これが私の入れ子の方法ですh1 a。

ただし、私の質問は、次のような結果になるように、連続した入れ子を作成するにはどうすればよいかということです。

「h1 div スパン a」

ネストされた各子がchildrenプロパティを使用できる必要があることを意味します。

私がこれまでに持っているスクリプトは以下のとおりです（変数に属しています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(";") + "}"
        }
    }
    //----
}

コメント間のセクションは、1 回のネスティングに使用するコードです。

これを追加するのがどれほど難しいかわかりません。しかし、それはおそらく簡単ではないことを理解しています。

私の完全な例はここにあります: http://jsfiddle.net/shawn31313/2tfnz/1

4

3 に答える 3

2

コードを非常に簡単に再帰的にすることができます:

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はありません。

于 2013-04-10T03:49:40.087 に答える