Question

是否可以根据（SVG）图像的可用性在Sass / Compass（使用Middleman）中创建条件循环？

我有多达150张图片（svg），每张图片都将用作导航链接的背景。但是，图像的数量是非连续的，这意味着一些中断。例如，有1.svg，2.svg，4.svg（缺少3.svg）。这种情况贯穿始终。

现在我可以创建一个涵盖所有可能性的循环：

@for $i from 1 through 150 {
    .icon_#{$i} {
        background-image: inline-image("svg/#{$i}.svg");
    }
}

如果我通常编译它产生多余的CSS代码（不存在的图像的规则），这就完成了工作。

然而，Middleman使用这个'cover all'循环抛出错误，如果图像丢失（不够公平），则不会编译CSS。这让我想到了......

由于Compass有图像帮助器，我是否可以添加其他逻辑，只有在图像存在时才生成样式？我的第一个想法是使用Compass image-width（）帮助器（例如，如果width == 0不继续），但这不适用于SVG。

任何人都可以想到这样做的方法吗？或者这简直难以置信？

Answer 1

您可以在循环前面的顶部添加一个sass变量并声明所有图像编号。即：

$svgs: 1, 2, 4, 15, ... 150

然后你的循环将是：

@for $i in $svgs {
    .icon_#{$i} {
        background-image: inline-image("svg/#{$i}.svg");
    }
}

这不是最好的解决方案，因为我确定你并不想输入多达150个号码。而且它不太可维护。但这是一个选择。

Answer 2

通过对Ruby的一点了解，您可以调整现有的解决方案来实现您的目标：