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

  • このエントリーをはてなブックマークに追加

配列で繰り返し処理をし、image-urlなどを使ってその名前の画像を表示するような仕組みの場合

そのファイルが無いとsassではエラーになってしまいます。 その時にその画像の有無をとってきて画像がない場合には処理が走らないようにしたり。

またはファイルの有無によって処理を変えたりなどの用途に使うことができます。


※ 他のカスタム関数も含まれています。

仕様・使い方

  1. config.rbに記述 
    (rbフォルダ内に入れている場合)
    require "./rb/develo.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');
}

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/104

このページの先頭へ戻る