Question

为什么SASS不解决计算？

$animation-speed-half-life: 1s;

@for $i from 0 through 31 {
  &:nth-child(#{$i}) {
    transition-delay: #{$animation-speed-half-life - $animation-speed-half-life / $i};
  }
}

而是输出transition-delay: 1s - 1s/1;

Answer 1

你有没有调试过吗？我在Sassmeister（SASS v3.4.21）上测试了你的代码，它显示了一个引用错误：

基本级规则不能包含父选择器引用字符＆＃39;＆amp;＆＃39;。

<强> DEBUG

$animation-speed-half-life: 1s;
$i: 1;


$test: #{$animation-speed-half-life - $animation-speed-half-life / $i};
@error $test; // this will render '0s' as expected


.parentElement { // comment this to show the reference error
  @for $i from 0 through 31 {
    &:nth-child(#{$i}) {
      transition-delay: #{$animation-speed-half-life - $animation-speed-half-life / $i};
    }
  }
}

Sassmeister Fiddle

不确定，如果这是您的完整代码或只是一个片段，但它会警告我上面引用的错误。它寻找一个不存在的父元素。也许，这就是为什么在你的版本中它不会计算的原因。 .parentElement只是为你提供工作方式的假人。

可能修正

添加@if - 检查父元素是否存在的条件：

@if & { ... }

所以基本上围绕循环包装条件：

@if & {
  @for $i from 0 through 31 {
    &:nth-child(#{$i}) {
      transition-delay: #{$animation-speed-half-life - $animation-speed-half-life / $i};
    }
  }
}

Sassmeister Fiddle

if & { ..语句是可选的。只是想告诉你如何排除错误。我不确定您的SASS版本是否仍然在错误期间插入计算。

我个人的方式是使用没有if &语句的占位符，因为占位符充当父元素并且不会发生错误。即使元素不存在，但占位符是：

%test {
  @for $i from 0 through 31 {
    &:nth-child(#{$i}) {
      transition-delay: #{$animation-speed-half-life - $animation-speed-half-life / $i};
    }
  }
}

parent {
  @extend %test;
}

Sassmeister Fiddle

Mixin也可以使用，但你的循环不需要任何参数来运行，所以占位符应该这样做。

Answer 2

我不确定为什么Sass不能计算出来但你实际上并不需要插入过渡延迟的值，因为周围没有CSS。

这将是我对您的代码的实现：

@mixin incremental-transition-delay($child-count, $half-life: 1s) {
  @for $i from 1 through $child-count {
    &:nth-child(#{$i}) {
      transition-delay: $half-life - $half-life / $i;
    }
  }
}

.thing {
  @include incremental-transition-delay(32, 1s);
}

为什么SASS不解决计算？

2 个答案: