CSSツールをうｐした。 - スプライト作成、ネスト、変数
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はじめてトライしてみたんだけど遅い… たぶん文法定義が悪い
