SASS/SCSS Background-image loop with nth-child <p>I'm creating a portfolio section of my static website and I'd like a neat way of assigning background-image url:s without adding any classnames (image image-1, image image-2 etc.) or style tags in HTML, <strong>but rather use only scss with nth-child, if possible</strong>...</p> <p>Because the image divs are nested I have some problems assigning background-images using nth-child. I've created a JSFiddle to reproduce the problem (<strong>the image divs are nested inside rows</strong>).</p> <p>My image files are named like in the fiddle (image-1.jpg, image-2.jpg etc.).</p> <p>The fiddle -> <a href="https://jsfiddle.net/szmvfo4o/" rel="nofollow">https://jsfiddle.net/szmvfo4o/</a></p> <p>The loop:</p> <pre><code>@for $i from 1 through 3 { .row:nth-child(#{$i}) { .image:first-child { background-image: url(image-#{$i}.jpg); } .image:last-child { background-image: url(image-#{$i+1}.jpg); } } } </code></pre> <p>Full SCSS:</p> <pre><code>.item { float: left; width: 50%; height: 120px; padding: 10px; box-sizing: border-box; } .inner { width: 100%; height: 100%; } .image { width: 100%; height: 100%; background-size: cover; background-color: #fff; //background-image: url(https://source.unsplash.com/-sQ4FsomXEs/800x600); background-image: url(image-1.jpg); } @for $i from 1 through 3 { .row:nth-child(#{$i}) { .image:first-child { background-image: url(image-#{$i}.jpg); } .image:last-child { background-image: url(image-#{$i+1}.jpg); } } } </code></pre> <p>HTML:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="item"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="item"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="item"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;div class="inner"&gt; &lt;div class="image"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>