Python Hack-a-thonに来たので、昔作ったツールのメンテをしたりしてました。 んで、githubにうｐした。

githubのプロジェクトはこちら: github cssc.git

• YAMLで段組を定義して、CSSスプライトを生成する make_sprite.py
• IE6のためにPNGをなるたけ綺麗にGIFにする to_gif.py
• CSSの記述に、ネストや、変数などを使えるようにするコンバータ cssc.py

で構成されてます。

make_sprite.py

YAMLの定義ファイルからCSSスプライトを生成します。 CSSスプライトっていうのは、のような奴で、複数の画像を一枚にまとめて、リクエスト回数、ファイルサイズを節約します。

CSSスプライトを使用すると、タグの代わりに<div>などの要素にbackgroundを指定することのなります。 CSSスプライトの中で画像の座標を調べるのは面倒なので、そこらへんの生成はcssc.pyを通して自動化しています。

使い方

make_sprite.py -o sprite.png -c sprite.json -b ./images/ sprite.yaml

• -o sprite.png　出力CSSスプライト名
• -c sprite.json 座標定義ファイル。あとでcssc.pyで使います。
• -b ./images/ 画像のベースディレクトリ
• sprite.yaml 画像の段組を記載したyaml

yamlの記法

段組はyamlで記述します。

冗長に書くと、以下のような感じです。

direction: vertical
images:
  - direction: horizontal
    images:
      - left-arrow.png
      - google.png
      - right-arrow.png
  - direction: horizontal
    images:
      - google-large.png
      - direction: vertical
        images:
          - down.png
          - up.png
          - close.png

基本的に directionとimagesのマップのネストで段組を表現します。directionは horizontal もしくは vertical 、imagesは画像ファイル名もしくは、マップのリストになります。

directionを省略して、直接子イメージのリストを書くことも出来ます。その場合の方向は、親の方向と逆になります。 この省略記法を利用すると、上のyamlは以下のようになります。

direction: vertical
images:
    - [left-arrow.png, google.png, right-arrow.png]
    - [google-large.png, [down.png, up.png, close.png]]

to_gif.py

pngをgifにします。

使い方は to_gif.py in.png out.gif　

cssc.py

CSS手書き派は日々、ネストができないことや、変数が使えないことに憤慨しています。

つまりこういう書き方がしたい！

{% set header_height = '24px' %}
{% set main_color = '#001122' %}

#site-header {
    height: {{ header_height }};

    h1#logo {
        font-size: 24px;
        color: {{ main_color }};
    }

    a {
        color: #aabbcc;

        _:hover {
            border: 1px solid #ffeedd;
        }
    }
}

OK! それなら、そうすればよいわ

./cssc.py -o out.css in.cssc

in.csscにみょうちきりんなcssもどきを書くと、in.cssにちゃんとしたものをはいてくれます。

上のmake_sprite.pyで、座標ファイルを出力した場合は以下のような感じで使います。

./cssc.py --coords main,http://static.com/main.png -o out.css in.css

--coordsオプションに
スプライト名:スプライトのURLを指定します。 座標はスプライト名.jsonから読み込みます。

csscファイルの方は、以下のように。冗長

h1#logo {
    {{ sprite_background('main', 'logo.png') }}
}

sprite_background関数の第1引数にスプライト名(コマンドラインで指定する奴)、第2引数に元画像ファイル名を指定します。

cssc詳細

{% set width = '100px' %} /* 変数などはJinja2そのまんまなので[Jinja2のドキュメント](http://jinja.pocoo.org/2/documentation/)を見るのが良いと思います。 */
// C++スタイルのコメントも使えます
{# jinja2スタイルも使えるぜ... #} 

div {
    /* 普通にcssのスタイル定義を書きます */
    border: 1px solid black;
    margin: 4px 8px;

    width: {{ width }}; // これはjinja2

    span {
        /* ネストすると "div span"　になります。 */
        font-weight: bold;
    }

    a {
        text-decoration: none;

        _:hover {
            // 親要素とスペース無しで続け対場合は '_' を使います。
            // この場合、このブロックは "div a:hover" になります。
            text-decoration: underline;
        }
    }
}

あとがき

• いまどきCSSを手書きしている奴はいるのだろうか
• でもYUI compressorとか使うならMakeで処理できるようにしておきたいよね。
• みんなここらへんの地味な所どうしてんだろう。
• PyParsingはじめてトライしてみたんだけど遅い…　たぶん文法定義が悪い