带有 nth-child 的 SASS/SCSS 背景图像循环答案

【问题标题】：SASS/SCSS Background-image loop with nth-child带有 nth-child 的 SASS/SCSS 背景图像循环
【发布时间】：2016-12-15 11:10:39
【问题描述】：

我正在创建我的静态网站的投资组合部分，我想要一种巧妙的方式来分配背景图像 url:s 而不添加任何类名（图像图像 1、图像图像 2 等）或样式标签在 HTML 中，如果可能的话，只使用带有 nth-child 的 scss...

因为图像 div 是嵌套的，所以我在使用 nth-child 分配背景图像时遇到了一些问题。我创建了一个 JSFiddle 来重现该问题（图像 div 嵌套在行内）。

我的图像文件在小提琴中命名（image-1.jpg、image-2.jpg 等）。

小提琴 -> https://jsfiddle.net/szmvfo4o/

循环：

@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);
    } 

  }

}

完整的 SCSS：

.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);
    } 

  }

}

HTML：

<div class="row">

  <div class="item">
    <div class="inner">
      <div class="image"></div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image"></div>
    </div>
  </div>

</div>

<div class="row">

  <div class="item">
    <div class="inner">
      <div class="image"></div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image"></div>
    </div>
  </div>

</div>

<div class="row">

  <div class="item">
    <div class="inner">
      <div class="image"></div>
    </div>
  </div>

  <div class="item">
    <div class="inner">
      <div class="image"></div>
    </div>
  </div>

</div>

【问题讨论】：

标签： loops sass background-image

【解决方案1】：

你的循环是错误的。

请使用以下代码。

@for $i from 1 through 3 {

  .row:nth-child(#{$i}) {
    .item:first-child {
      .image {
        background-image: url(image-#{$i}.jpg);
      } 
    }
    .item:last-child {
      .image {
        background-image: url(image-#{$i+1}.jpg);
      } 
    }

  }

}

【讨论】：

【解决方案2】：

你也可以考虑使用 flexbox。将所有内容包装在容器 div 中

.container {
  display: flex;
  flex-wrap: wrap;
}

去掉行 div，不需要行，循环看起来像这样：

@for $i from 1 through 6 {

    .item:nth-child(#{$i}) {
      .inner {
        .image {
          background-image: url(image-#{$i}.jpg);
          }
      }
    } 
}

在此处查看 Fiddle 中的其余代码 >> https://jsfiddle.net/2f0hgfh8/

在之前的解决方案中，循环无法正常工作，因为在每一行 ($i) 上，它都会计算图像 $i 和 $i+1。结果它看起来像这样：

image1 image2
image2 image3
image3 image4
image4 image5

【讨论】：