glue 0.9.2 で scss 吐き出しを試す
追記:14/08/21
吐き出された scss は、css で吐き出した結果と同じことが分かった。
ソースレベルで見ても、css のテンプレートをそのまま使っている模様。
いつの間にか glue が大幅アップデートされて scss の吐き出しがサポートされていた。 https://glue.readthedocs.org/en/latest/
元々 0.4.1 がインストールされていたので、アップデートして試してみる。
$ sudo pip install glue --upgrade $ glue -v glue 0.9.2
テスト用にフリーアイコンを入手。
http://www.fatcow.com/free-icons
http://www.fatcow.com/fatcow-icons/fatcow-hosting-icons-3800.zip
ダウンロードしたアイコンを丸ごとスプライトマップにするには数が多すぎるので適当にディレクトリを作って 9 個アイコンをコピーする。
. └── FatCow_Icons ├── 32_bit.png ├── 3d_glasses.png ├── 64_bit.png ├── accept(2).png ├── accept.png ├── access_exports.png ├── access_imports.png ├── accordion.png └── account_balances.png
実験
$ glue FatCow_Icons --output=output --scss
結果
output/ ├── FatCow_Icons.png └── FatCow_Icons.scss
画像
scss
/* glue: 0.9.2 hash: befcc8c81c */ .sprite-FatCow_Icons-account_balances,.sprite-FatCow_Icons-accordion,.sprite-FatCow_Icons-access_imports,.sprite-FatCow_Icons-access_exports,.sprite-FatCow_Icons-accept,.sprite-FatCow_Icons-accept2,.sprite-FatCow_Icons-64_bit,.sprite-FatCow_Icons-3d_glasses,.sprite-FatCow_Icons-32_bit{ background-image:url('FatCow_Icons.png'); background-repeat:no-repeat; } .sprite-FatCow_Icons-account_balances{ background-position:0 0; width:16px; height:16px; } .sprite-FatCow_Icons-accordion{ background-position:-16px 0; width:16px; height:16px; } .sprite-FatCow_Icons-access_imports{ background-position:0 -16px; width:16px; height:16px; } .sprite-FatCow_Icons-access_exports{ background-position:-16px -16px; width:16px; height:16px; } .sprite-FatCow_Icons-accept{ background-position:-32px 0; width:16px; height:16px; } .sprite-FatCow_Icons-accept2{ background-position:-32px -16px; width:16px; height:16px; } .sprite-FatCow_Icons-64_bit{ background-position:0 -32px; width:16px; height:16px; } .sprite-FatCow_Icons-3d_glasses{ background-position:-16px -32px; width:16px; height:16px; } .sprite-FatCow_Icons-32_bit{ background-position:-32px -32px; width:16px; height:16px; } @media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0),screen and (-o-min-device-pixel-ratio: 100/100),screen and (min-device-pixel-ratio: 1.0),screen and (min-resolution: 1.0dppx){ .sprite-FatCow_Icons-account_balances, .sprite-FatCow_Icons-accordion, .sprite-FatCow_Icons-access_imports, .sprite-FatCow_Icons-access_exports, .sprite-FatCow_Icons-accept, .sprite-FatCow_Icons-accept2, .sprite-FatCow_Icons-64_bit, .sprite-FatCow_Icons-3d_glasses, .sprite-FatCow_Icons-32_bit { background-image:url('FatCow_Icons.png'); -webkit-background-size: 48px 48px; -moz-background-size: 48px 48px; background-size: 48px 48px; } }
正常に出力はされた。
ちなみに、アイコン一式丸ごと試したら 26616 行と膨大な量になった。