SASS/SCSS 的 @if 用于选择要使用的图像类型？

Question

这是我第一次尝试使用来自SASS 的 @if 控制指令。

我有一个文件夹中的优化图像列表，其中一些像 JPG 一样小，而另一些像 PNG 一样小。

使用@if 规则我想说“如果该文件的JPG 存在，则使用此@include，否则使用另一个”。

（示例中的 gif 只是为了澄清我是否至少得到了 else if 部分正确。）

我的例子：

$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;
        }
    }
}

不知何故，我似乎弄错了，需要您的帮助。 JPG 显示正常，但 PNG 根本不显示 - CSS 文件中没有编译输出。

我使用@include background-image-retina 并且不能像this fabulous mixin 那样为图像类型定义自定义变量。所以我不确定如何解决这个问题。

---

更新：就像@lnrbob 指出的那样 - 无法使用 SASS 检查现有文件。我将答案标记为正确，因为他提供了一个出色的 @if 示例，从长远来看，它帮助我理解了这个 SASS 功能。

Answer 1

我很困惑你在这里做什么。 SASS 不会检查您的文件系统以查看是否存在 A.jpg 或 'A.png`。您需要更新变量。所以在你的例子中（我认为）它应该是这样的：

$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;
        }
    }
}

你会像这样使用它：

@include portfolio-images('png');

---

我不认为这是您想要实现的目标，不是吗？如果您想复制retina-compass helper 的功能（您已链接到@include background-image-retina），您需要将其作为一些ruby 脚本执行，以输入SASS 使用的编译过程（在此示例中为helper使用Compass)。

我希望这至少会有所帮助。如果我完全误解了，请告诉我，我会复习:)