compass-sass - 是否可以根据 (SVG) 图像的可用性在 Sass/Compass (with Middleman) 中创建条件循环？

Question

是否可以根据 (SVG) 图像的可用性在 Sass/Compass (with 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 使用此“覆盖所有”循环会引发错误，并且如果图像丢失（足够公平），则不会编译 CSS。这让我开始思考……</p>

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

谁能想到这样做的方法？或者这根本不可信？

score 0 · Accepted Answer

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

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

那么你的循环将是：

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

这不是最好的解决方案，因为我确定您并不想输入多达 150 个数字。另外，它不是很可维护。但这是一种选择。

score 0 · Accepted Answer

只要对 Ruby 有一点了解，您就可以调整这个现有的解决方案来做您想做的事情：

2 回答 2