6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-05-17

配列で繰り返し処理をし、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');
}
6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?