SASS/scs's@if用于选择要使用的图像类型

Question

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

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

根据CCD_ 2规则；如果该文件的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，无法为图像类型定义自定义变量，就像在这个美妙的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助手的功能（你已经将其链接为@include background image retina），你需要将其作为一些ruby脚本来执行，以输入SASS使用的编译过程（在本例中，助手使用compass）。

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