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 行と膨大な量になった。