How to generate CSS code line by line using Jinja2

Question

I am aware that it is possible to define entire blocks of CSS using Jinja2 as shown in this link, however, I would like to be able to manipulate individual lines of CSS.

For example, if I were to write my CSS code manually I would do the following:

#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%); }

However, I would like to be able to generate this code at an arbitrary size using for loops.

I am trying to do something like this using 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 %}

But my IDE is giving me errors when I do it. Is what I am looking for possible to do with Jinja2?