将 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 不起作用。

将 SASS @include 简化为一个循环？

Simplifying SASS @include's to a loop?

loops

sass

bourbon