如何使用 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 相关吗？