web-dev-qa-db-ja.com

HTMLとCSSを動的に生成する

手でCSSを書くのは非常に退屈だと思います。

fluidなどの概念に出くわすと、CSSのサイズが適切に変更され、さまざまなブラウザーで同じに見えるように、すべてのWebサイトを記述したくなります。

あなたへの私の質問は：デザインをプログラムで生成できますか？

例えば。：

#include <css>
#include <html>
#include <vector>
#include <string>

int main(void) {
    HTML::HTML page;
    page.title("my title");
    page.heading.font(15);
    std::vector<std::string> para = <vector of paragraphs>;

    CSS::CSS layout;
    layout.grid(2,2);
    layout.fill(xcoords_as_percentage, ycoords_as_percentage);

    page.use_css(layout);
    for(int i=0; i<para.size() && y!=grid.y.size()+1; i++, x++) {
        if(x==grid.x.size()) x=0, y++;
        page.grid[x][y]=para[i];
    }
    page.header1("I am header1");
    page.footer("I am page footer");
    layout.order(page.header1[0], page.grid.all(), page.footer());

    generate_html("index.html");
    generate_css("layout.css");
}

これにより、「ああ、IE7はこのオプションをサポートしていないので、このハックを行う...」から抽象化して、実際のコンテンツに集中できます。

参考までに、私は実際のサイトをDjango（Python）でコーディングしているので、HTML/CSSジェネレーターがC++である必要はありません。この方向で行われている作業は C++ Wtフレームワーク

c++htmlcssweb-design
6
A T

この質問はスタックオーバーフローでより適切ですが、SASSやスタイラスなどのプログラムによるCSS言語/フレームワークを使用したいようです。

http://sass-lang.com/

http://learnboost.github.com/stylus/

特に、変数、関数、ミックスインはこれらの言語で非常に役立ちます。

5
Magnus Wolffelt

Magnus Wolffeltの答え に追加して、 [〜＃〜] less [〜＃〜] を見てください：

LESSは、変数、ミックスイン、操作、関数などの動的な動作でCSSを拡張します。 LESSは、Node.jsを使用して、クライアント側（IE 6 +、Webkit、Firefox）とサーバー側の両方で実行されます。

私はSassよりもその構文を好みますが、それは意見の問題です。 Django Compressor は、LESSで正常に動作し、縮小されたスクリプトを生成するボーナスが追加されます。

Django Compressorは、リンクされたインラインJavaScriptまたはCSSをDjangoテンプレートにまとめて圧縮し、compressテンプレートタグを使用してキャッシュ可能な静的ファイルにします。

非常に便利な Apacheフィルター もあるprovides on demand conversion of CSS LESS files to CSS using CSS::LESSp under mod_Perl2.、本当にそこに行きたい場合。言語とフレームワークにとらわれないLESSの使用を提供するはずですが、数分間試してみただけで、PHPに似たソリューションを使用していますDjangoコンプレッサーで、それを必要としていませんでした。

2
yannis