Loops 简化SASS@include'；什么是循环？

我有一段代码，这是迄今为止我构建的最高级的SASS代码。现在我想知道是否可以使用@includes的某种循环来简化它，但是我的大脑有点僵硬。是否可以添加某种$n++

@mixin child($n, $d, $t1: null, $t2: null) {
  &:nth-child(#{$n}) {
    @include animation-delay(#{$d}s);
    @if variable-exists(#{$t1}) {
      @include transform(translate(#{$t1}px,#{$t2}px));
    }
  }
}

@include child(1, 0.9);
@include child(2, 1.1, 18, 13);
@include child(3, 1.3, 35, 25);
@include child(4, 1.1, 18, 38);
...

起初我想把@mixin放在循环中，但这必须是一种复杂的方式。有更简单的方法吗

---

干杯

您可以使用一个

children（）

mixin，它将在参数中包含一个列表：

@mixin child($n, $d, $t1: null, $t2: null) {
  &:nth-child(#{$n}) {
    @include animation-delay(#{$d}s);
    @if variable-exists(#{$t1}) {
      @include transform(translate(#{$t1}px,#{$t2}px));
    }
  }
}

@mixin children($children) {
  $n: 1;
  @each $child in $children {
    $d: nth($child, 1);
    $t1: null;
    $t2: null;
    @if length($child) > 1 {
      $t1: nth($child, 2);
      $t2: nth($child, 3);
    }
    @include child($n, $d, $t1, $t2);
    $n: $n+1;
  }
}

@include children((
  (0.9),
  (1.1, 18, 13),
  (1.3, 35, 25),
  (1.1, 18, 38)
));

请注意双括号

旁注

您以错误的方式使用了

变量-exists（）

。首先，必须传递变量名，而不是变量本身：

@if variable-exists(t1) { ... }

第二，不确定，但我认为你应该用这句话：

@if $t1 != null { ... }

---

$t1

变量值可以是

null

，但变量本身将始终存在。所以我认为你的

@如果

不起作用。

我一定要深入研究@each循环。这是一个很好的小把戏！看起来我可以重新使用一些代码（不需要将$t1和$t2设为null两次，对吧？），但我必须说，它工作起来很有魅力！谢谢！是的，关于变量-exists（）函数，您是正确的。事实上，我只是选择了@if（$t1），结果很好。