clover.blue

Sass,Compassでフォルダ内のファイルリストを取得するカスタム関数

Data
2014/05/17
Tag

Sass,Compassでフォルダ内にある複数の画像をとってきて背景画像を指定したいときなどに、「全部書くのってめんどくさいなぁ・・」って思っていました。

なので！指定したフォルダ内のファイル名を取得してくれるやつを作ってみました！コードも省略できたり。
新たにフォルダ内に画像を追加してコンパイルすればコードを書く手間も省けたりで使い勝手良いと思います。

仕様・使い方

  • fileList('folderName/')でフォルダ内の全てのファイルリストが取得できます。（例えばgifの画像だけを取得したい場合にはfileList('folderName/.gif')となります。）
  • 初期状態ではcompass watchした場所からのパスを全て表示します。
  • 第2引き数にfalseを入れることによりfileList('folderName/*',false)ファイル名 + 拡張子だけを取得することができます。
  • 拡張子が必要ない場合には第3引き数に必要のない拡張子を指定しますfileList('folderName/*',false,'.gif')

実際に使う

「html/img」フォルダ内のgif画像を階層なし拡張子無しファイル名を取得したい場合。

「$images_dir」にconfig.rbで指定しているimages_dirの値を持っておくと便利です。
※ config.rb内のimages_dirの値を取ってこれたら便利だなぁと思ったのですが、見つかりませんでしたので、sass内で持つようにしています。

Sass

$images_dir: 'html/img/';
$imgs: fileList($images_dir + "*.gif",false,'.gif');

.fileList li {
    @each $img in $imgs {
        #{"&." + $img} {
            background: image-url("#{$img}.gif");
        }
    }
}

CSS

.fileList li.img1 {
  background: url('/html/img/img1.gif?1394796721');
}
.fileList li.img2 {
  background: url('/html/img/img2.gif?1394796721');
}
.fileList li.img3 {
  background: url('/html/img/img3.gif?1394796721');
}
.fileList li.img4 {
  background: url('/html/img/img4.gif?1394796721');
}
.fileList li.img5 {
  background: url('/html/img/img5.gif?1394796721');
}