title: SASS/SCSS Background-image loop with nth-child
body: <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>