SASS/SCSS's @if for choosing the type of image to use?
===

it's my fist try on using the **@if control directive** from [SASS](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id10). 

I have a list of optimized images in a folder, some of them are smaller as JPG's and others are smaller als PNG's.  

With the @if rule I'm trying to say **"if a JPG of that file exists use this @include, else use the other one"**.  

*(The gif's in the example are just in there to clarify if I at least got the else if part right.)*

### My Example:

    $list: A, B, C;
    
    $type: jpg;
    
    @mixin portfolio-images {
    	@each $item in $list {
    		a[href*="#{$item}"] span {

                /* @if starts */   

    			@if $type == jpg {@include background-image-retina("#{$item}.jpg");}
    			@else if $type == png {@include background-image-retina("#{$item}.png");}
    			@else {@include background-image-retina("#{$item}.gif");}

                /* @if ends */   


    			@include hide-text;
    			width: 300px;
    			height: 150px;
    		}
    	}
    }

Somehow I seem to get this wrong and need your help. The JPG's display fine, but the PNG's don't display at all - no output is compiled in the CSS file.

I use the [@include background-image-retina](http://blog.joelambert.co.uk/2012/03/09/compass-sass-mixins-for-simple-retina-images-on-websites/) and can't define a custom variable for image type like in [this](https://gist.github.com/1210421) fabulous mixin. So I'm not sure how to approach this.