将 SASS @include简化为循环？

Question

我有这段代码，它是迄今为止我构建的最高级的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放在循环中，但这一定很复杂。一些更简单的方法？

干杯

Answer 1

您可以使用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)
));

请注意双括号。

旁注

您使用variable-exists()的方式不对。首先，您必须传递变量名，而不是变量本身：

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

第二，不确定，但我认为你应该使用这条线：

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

$t1变量值可以是null，但变量本身将始终存在。所以我认为你的@if不起作用。