Question

我想在更简洁的sass循环中编写下面的代码块，但是遇到了尝试在scss中嵌套for循环的问题。

这是我想要生成的代码：

/* two items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(2),
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(1) { width: 50%; }

/* three items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(3) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(2) { width: 50%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(1) { width: 25%; }

/* four items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(4) { width: 16.65%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(3) { width: 33%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(2) { width: 33%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(1) { width: 16.65%; }

/* five items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(5) { width: 12.5%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(4) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(3) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(2) { width: 25%; }
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(1) { width: 12.5%; }

/* six items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(6) { width: 10%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(5) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(4) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(3) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(2) { width: 20%; }
.stepwizard li.stepwizard-step:nth-child(6):nth-last-child(1) { width: 10%; }

/* seven items */
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(7) { width: 8.33%; }
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(6) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(5) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(4) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(3) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(6):nth-last-child(2) { width: 16.66%; }
.stepwizard li.stepwizard-step:nth-child(7):nth-last-child(1) { width: 8.33%; }

这是我的初步尝试，但无效： 我甚至没有到达我需要将第一个和最后一个项目放在中间项目宽度的一半的部分。

@for $i from 2 through 7 {
  @for $j from 1 through $i {
    .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{$i - $j}) {
      width: percentage(1/$i)
    }
  }
}

任何帮助都会非常感激。

更新 - 已完成的代码： 感谢jhpratt指出我关于循环语法的正确方向。

@for $i from 2 through 7 {
  /*! #{$i} step wizard spacing */
    @for $j from 1 through $i {
        .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{($i - $j)+1}) {
            @if $j == 1 or $j == $i {
                width: percentage(0.5 / ($i - 1));
            } @else {
                width: percentage(1 / ($i - 1));
            }
        }
    }
}

Answer 1

这是您正在寻找的内容

@for $i from 2 through 7 {
    @for $j from 1 through $i - 1 {
        .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{$i - $j}) {
            @if $j == 1 or $j == $i - 1 {
                width: percentage(0.5 / ($i - 1));
            } @else {
                width: percentage(1 / ($i - 1));
            }
        }
    }
}

这应该是相对不言自明的。

如何使用SASS / SCSS循环重写它？

1 个答案: