自动CSS预览生成器-具有CSS文件，想要自动生成HTML来预览样式

Question

我有一个由网站设计师开发的相当大的CSS文件。

当然，在其中分配了许多ID，类和标签属性。是否有任何工具可基于CSS源文件自动生成HTML？

例如：

#basicInfoHead{
    background:url(../images/leftHeaders.jpg) no-repeat;
    margin-left: 0px;
    width:185px;
    height:28px;
}

#basicInfoHead span{
    float: left;    
}

将产生

<div id=basicInfoHead><span>#basicInfoHead span</span></div>

等等从那里，我可以在浏览器中预览生成的代码，并查看每种单独的样式（主要是文本样式）。

提前感谢！

Answer 1

这听起来似乎不适用于现实世界的样式表。您的示例非常简单（即使对于任何生成器来说，要知道要生成什么，它都必须是div#basicInfoHead），但是如果变得更加复杂，该怎么办？对于多个页面，以不同的方式定义的元素呢？那么，需要放在元素x顶部的元素，或者需要紧随其后的元素y才能看起来很好呢？那么“不完整”类呢？没有为<table><tr><th>定义任何内容的tr系列？合并类.class1.class2.class3的特定规则如何？

在我一直在研究的样式表列表中，没有一种可以像您所需要的那样被生成器转换为明智的HTML代码。不确定是否存在这样的工具。

您的设计师应该为您提供HTML以测试CSS。这是通常的方式，据我所知，这是唯一有意义的方式。

Answer 2

我们走了。我正在做几个假设，这些假设只会成立，因为我的设计师使用了某种样式：

1. 一切都是div
2. 我只想查看文本样式，所以我将忽略所有与文本无关的内容

不是我最好的东西，但它适用于我的大多数样式。必须手动编辑一些标签，例如ul，ol，li，并删除“ body”。

#!/usr/bin/perl
use warnings;
use strict;
my $css;

open(FILE, '<', 'styles.css') or die();
while (<FILE>) { $css .= $_; }
close(FILE);

my (@css) = $css =~ m/^([a-zA-Z.#][^\n\r]+{.+?})/gmxs;

my @text_css = grep { /\s(h[1-5]|span|font|color|p|a|ol|ul)\b/ } @css;
foreach my $css(@text_css) {
    my ($selector_text) = $css =~ /^([^{]*){/;
    my (@selector) = split(/[\s{]/,(split(/[\n\r]+/,$selector_text))[0]);
    @selector = grep { !/{/ } @selector;
    my $start_html = '';
    my $middle_html = join(" ",@selector);
    my $end_html = '';
    my $result = '';
    for (my $i=0; $i< scalar(@selector); $i++) {
        $selector[$i] =~ s/:[-\w]+//g;
        if (substr($selector[$i],0,1) eq '#') {
            $selector[$i] =~ s/^#//g;
            $start_html .= qq(<div id="$selector[$i]">);
            $end_html = "</div>" . $end_html;
        }
        elsif (substr($selector[$i],0,1) eq '.') {
            $selector[$i] =~ s/^\.//g;
            $start_html .= qq(<div class="$selector[$i]">);
            $end_html = "</div>" . $end_html;
        } 
        else {
            # we have a tag, possibly with an id/class
            my($tag,$extra,$type);
            if ($selector[$i] =~ m/\./) {
                ($tag,$extra) = split('.', $selector[$i]);
                $extra =~ s/^\.//g;
                $type = 'class';
            }
            elsif ($selector[$i] =~ m/#/) {
                ($tag,$extra) = split('#', $selector[$i]);
                $extra =~ s/^#//g;
                $type = 'id';
            }
            else {
                $tag = $selector[$i];
            }

            if ($extra and $type) {
                $start_html .= qq(<$tag $type="$extra">);
            }
            else {
                $start_html .= qq(<$tag>);
            }
            $end_html = "</$tag>" . $end_html;
        }

        # is this the last one?
        if ($i == scalar(@selector) - 1) {
            $result = $start_html . $middle_html . $end_html;
        }


        print "<div>$result</div>\n" if ($result);
    }
}

Answer 3

基于Python的CSS预览生成器：https://github.com/glowinthedark/css_stylesheet_preview_generator

取决于cssutils（与pip3 install cssutils一起安装。

用法：

python3 css_preview_generator.py mystyle.css > preview.html