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到循环？

1 个答案: