Question

It’s my first try using the @if control directive from SASS.

I have a list of optimized images in a folder. Some of them are smaller as JPGs and others are smaller as PNGs.

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 there to clarify whether the "else if" part is 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;
        }
    }
}

The JPGs display fine, but the PNGs don’t display at all – no output is compiled in the CSS file.

I use the @include background-image-retina and can’t define a custom variable for image type like in this fabulous mixin. So I’m not sure how to approach this.

---

Update: Like @lnrbob pointed out – it is not possible to check for existence of files with SASS. I marked his answer as correct since he provided an excellent @if example and in the long run helped me with this in understanding this SASS feature.

Answer 1

I’m confused what you are doing here. SASS won’t check your file system to see if A.jpg or ‘A.png` exists. You need to update the variable. So in your example (I think) it should look like this:

$list: A, B, C;

@mixin portfolio-images($type: 'jpg') {
    @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;
        }
    }
}

And you’d use it like:

@include portfolio-images('png');

---

I don’t think this is what you are wanting to achieve though is it? If you are wanting to replicate the functionality of the retina-compass helper (which you’ve linked to as @include background-image-retina) you need to do this as some ruby script to feed into the compiling process that SASS uses (in this example the helper uses Compass).

I hope this is, at least, mildly helpful. Please let me know if I’ve completely misunderstood and I’ll review 🙂