配列で繰り返し処理をし、image-url
などを使ってその名前の画像を表示するような仕組みの場合
そのファイルが無いとsassではエラーになってしまいます。
その時にその画像の有無をとってきて画像がない場合には処理が走らないようにしたり。
またはファイルの有無によって処理を変えたりなどの用途に使うことができます。
仕様・使い方
-
config.rbに記述
(rbフォルダ内に入れている場合)require "./rb/isFile.rb"
-
isFile('fileName')で ture or false が文字列で返って来ます。
※ fileNameはcompass watch
している場所からのパスになります。 -
実際に使う
@if isFile('fileName') == 'true' { }
例
img(数字).gifの画像を背景に指定する際にimg6以降がない場合。
Sass
$img: img1,img2,img3,img4,img5,img6,img7,img8,img9,img10;
$num: 0;
ol li {
text-indent: -9999px;
@each $name in $img {
$num: $num + 1;
&#{':nth-child(' + $num + ')'} {
@if isFile('html/img/' + $name + '.gif') == 'true' {
background: image-url($name + '.gif');
}
}
}
}
CSS
ol li {
text-indent: -9999px;
}
ol li:nth-child(1) {
background: url('/html/img/img1.gif?1394796721');
}
ol li:nth-child(2) {
background: url('/html/img/img2.gif?1394796721');
}
ol li:nth-child(3) {
background: url('/html/img/img3.gif?1394796721');
}
ol li:nth-child(4) {
background: url('/html/img/img4.gif?1394796721');
}
ol li:nth-child(5) {
background: url('/html/img/img5.gif?1394796721');
}