0

这是我第一次尝试使用来自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并且不能像在这个美妙的 mixin 中那样为图像类型定义自定义变量。所以我不确定如何解决这个问题。

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

4

1 回答 1

0

我很困惑你在这里做什么。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');

我认为这不是您想要实现的目标，不是吗？如果您想复制视网膜指南针助手的功能（您已链接到@include background-image-retina），您需要将其作为一些 ruby​​ 脚本执行，以输入 SASS 使用的编译过程（在这个例子助手使用Compass）。

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

于 2012-07-11T12:51:55.510 回答