如何使JavaScript编译嵌套的css规则 [英] How to make JavaScript compile nested css rules

问题描述

你好，



我正在尝试制作一个可以编译这样的javascript代码：

Hello,

I am trying to make a javascript code that can compile something like this:

html{
    background: #2E2E2E;
    body{
        height: 200px;
        width: 100%;
        background: #fff;
        a{
            color: rgb(0, 0, 255);
            &:hover{
                color: rgb(200, 0, 255);
            }
        }
    }
}

进入通用CSS：

Into generic CSS:

html{
    background: #2E2E2E;
}
html body{
    height: 200px;
    width: 100%;
    background: #fff;
}
html body a{
    color: rgb(0, 0, 255);
}
html body a:hover{
    color: rgb(200, 0, 255);
}

我该怎么做？



感谢您的帮助。

How can I do this?

Thanks for any help.

推荐答案

感谢您的所有澄清。



没什么特别的这项工作，但当然需要时间和精力。首先，请注意您的嵌套CSS和所需的CSS都是树结构的示例：

http://en.wikipedia.org/wiki/Tree_%28graph_theory%29 [ ^ ]，

http://en.wikipedia.org/wiki/Tree_%28data_structure%29 [ ^ ]。



这是中最琐碎的一种图，广泛用于编程。对树木的操作方法也是众所周知的。您可以这样计划：

Thank you for all the clarifications.

There is nothing special in this work, but it needs time and effort, of course. First of all, note that both your "nested CSS" and required CSS are the examples of the tree structure:
http://en.wikipedia.org/wiki/Tree_%28graph_theory%29[^],
http://en.wikipedia.org/wiki/Tree_%28data_structure%29[^].

This is one of the most trivial kinds of graphs, widely used in programming. The method of operations on trees are also well known. You plan can be this:

1. 开发一个解析器，将CSS文本解析为一些DOM树结构。
2. 将映射规则从嵌套CSS结构定义为所需的目标CSS结构。 / li>
3. 使用映射规则和输入结构实现树结构的转换。
4. 开发代码生成器，它使用您转换的CSS结构并生成适当的文本，目标CSS代码。

大多数分娩项目都是解析器的开发。同时，您可以使用其中一个可用的解析器。事实证明，解析CSS是非常受欢迎的活动。我建议从这里开始： http://codetheory.in/parsing-css-in-javascript [< a href =http://codetheory.in/parsing-css-in-javascripttarget =_ blanktitle =New Window> ^ ]。



本文包含简短概述和可以使用的可用解析器列表。您可以查看所有这些，并选择您认为最方便的目的。在最坏的情况下，您将不得不修改解析器代码以采用您的CSS结构。

-SA

这篇关于如何使JavaScript编译嵌套的css规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！