clover.blue

Sass,Compassファイルの有無を返してくれるカスタム関数

Data
2014/05/17
Tag

配列で繰り返し処理をし、image-urlなどを使ってその名前の画像を表示するような仕組みの場合
そのファイルが無いとsassではエラーになってしまいます。
その時にその画像の有無をとってきて画像がない場合には処理が走らないようにしたり。
またはファイルの有無によって処理を変えたりなどの用途に使うことができます。

仕様・使い方

  1. config.rbに記述
    (rbフォルダ内に入れている場合)

    require "./rb/isFile.rb"
    
  2. isFile('fileName')で ture or false が文字列で返って来ます。
    ※ fileNameはcompass watchしている場所からのパスになります。

  3. 実際に使う

    @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');
}