Posted at

CSS Sprites 生成ツール、Glue で使いそうなオプションのメモ

More than 5 years have passed since last update.

CSS Sprites の自動生成ツール Glue を試してみたのでメモ。

ディレクトリ構成

DocumentRoot/

img/
sprites-images/
img1.png
...
img2.png
css/

実行コマンド

# 実行は DocumentRootで

glue img/sprites-images --url '/img' --css='css' --img='img'

オプション
意味

img/sprites-images
素材画像が入っているディレクトリ

--url '/img'
background-image:url(...) URLの先頭に付くパス

--img='img'
画像の出力先

--css='css'
css の出力先

実行結果

DocumentRoot/

img/
sprites-images/
img1.png
...
img2.png
sprites-images.png
css/
sprites-images.css

画像とcssのファイル名は、素材画像を格納したディレクトリ名が使われるよう。

コマンド実行のたびに、CSSが上書きされるのは嫌なので、LESS か何かでインポートさせるのが良さそう。

LESS で出力するのは --less オプション。