如何使用 Jinja2 逐行生成 CSS 代碼

Question

我知道可以使用 CSS 定義整個塊，如本鏈接所示，使用 Jinja2，但是，我希望能夠操作 CSS 的各個行。

例如，如果我要手動編寫 CSS 代碼，我會執行以下操作：

#s1:target ~ .slider{ transform: translateX(   0%); -webkit-transform: translateX(   0%); }
#s2:target ~ .slider{ transform: translateX(-100%); -webkit-transform: translateX(-100%); }
#s3:target ~ .slider{ transform: translateX(-200%); -webkit-transform: translateX(-200%); }
#s4:target ~ .slider{ transform: translateX(-300%); -webkit-transform: translateX(-300%); }

但是，我希望能夠使用 for 循環生成任意大小的代碼。

我正在嘗試使用 Jinja2 做這樣的事情：

{% for image in images%}
    {% set string1 = "#s" %}
    {% set string2 = loop.index|string %}
    {% set string3 = string1 + string2 %}
    #{{string3}}:target ~ .slider{ transform: translateX(   0%); -webkit-transform: translateX(   0%); }
{% endfor %}

但是當我這樣做時，我的 IDE 給了我錯誤。 我正在尋找的可能與 Jinja2 相關嗎？