フォルダ内の画像のパスと縦横サイズをSASSまたはLESSの変数やミックスインとして書き出すnpmモジュールを作った

https://www.npmjs.com/package/bgi の紹介

これはなに？

画像の入ったフォルダで実行すると、画像名で画像のパス、width、heightがLESSまたはSASS形式の変数やミックスインとして書き出される。

効果

コーディングがすげー早くなる。

使い方

SASSの場合

画像フォルダに移動して、bgi --pathVar imagepath --type sassを実行。
すると、

images.scss

$icon_Addlink-width:38px;
$icon_Addlink-height:37px;
$icon_Addlink-image:url("#{$imagepath}icon_Addlink.png");
@mixin icon_Addlink(){
  background-image:url("#{$imagepath}icon_Addlink.png");
  background-size:38px 37px;
}
@mixin icon_Addlink--block(){
  background-image:url("#{$imagepath}icon_Addlink.png");
  background-size:38px 38px;
  width:38px;
  height:37px;
}

こんな感じのファイルが出力される。

LESSの場合

画像フォルダに移動して、bgi --pathVar imagepathを実行。
すると、

images.less

@icon_Addlink-width:38px;
@icon_Addlink-height:37px;
@icon_Addlink-image:url("@{imagepath}icon_Addlink.png");
.icon_Addlink(){
  background-image:url("@{imagepath}icon_Addlink.png");
  background-size:38px 37px;
}
.icon_Addlink--block(){
  background-image:url("@{imagepath}icon_Addlink.png");
  background-size:38px 37px;
  width:38px;
  height:37px;
}

こんな感じのファイルが出力される。

使用例

SASSの場合

main.scss

$imagepath:"../img/mypage/";
@import "#{$imagepath}images.scss";
div.icon--addlink{
  @include icon_Addlink--block();
}
span.icon--addlink{
  @include icon_Addlink();
}

LESSの場合

main.less

@imagepath:"../img/mypage/";
@import "@{imagepath}images.less";
div.icon--addlink{
    .icon_Addlink--block();
}
span.icon--addlink{
    .icon_Addlink();
}

変数を指定することも出来るが、ショートハンドとして用意されている関数／ミックスインを使うのが楽。
例えばセンタリングしたい場合など高さのみ使いたいときは個別に変数を用いれば良い。

背景

Webサイトのコーディングしてると、殆どデザインの画像を切り貼りしてるだけ、って事がよくあります（よね？）。
このとき、imgタグを使うならHTMLに書くわけですが、CSSで書くならbackground-imageを使うことになります。
こんなかんじ。

main.css

div.icon--addlink {
  background-image: url("../img/mypage/icon_Addlink.png");
  background-size: 38px 37px;
  width: 38px;
  height: 37px;
}
span.icon--addlink {
  background-image: url("../img/mypage/icon_Addlink.png");
  background-size: 38px 37px;
}

しかし、ファイル名を書くだけならまだしも、切り出し画像のwidthとheightを取るのにいちいちファイルを右クリックしたり、その数値をCSSに書き込んだりするのが非常に面倒くさい。
Cocos2d-jsでゲーム作るときはファイル名だけでプリロードしてsprite初期化すればwidthもheightも取れるのに！
でも考えてみればLESSやSASSなら変数定義ができるんだから同じことが出来る筈、ということで作った。

詳細

hadakadenkyu / bgi — Bitbucket
https://bitbucket.org/hadakadenkyu/bgi/overview