2

(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 はこの「すべてをカバーする」ループを使用してエラーをスローし、画像が欠落している場合は CSS をコンパイルしません (当然のことですが)。そして、それは私に考えさせました…</p>

コンパスには画像ヘルパーがあるため、画像が存在する場合にのみスタイルを生成する追加のロジックはありますか? 私が最初に考えたのは、Compass image-width() ヘルパーを使用することでした (たとえば、幅 == 0 の場合は継続しません) が、これは SVG では機能しません。

誰でもこれを行う方法を考えることができますか? それとも単に信じられないことですか？

4

2 に答える 2