sass / scss＃{$ value + s}减少

问题描述

有一个变量@value：5; 我想将其置于过渡延迟状态。 （转换延迟：@value;）

但是过渡延迟属性只能包含几秒钟

如何将@value转换为秒数

我阅读了较少的文档，但没有找到有关此问题的任何信息 （也许我没专心）

.delay-for-every-child (@i) when (@i > 0) {
    &:nth-child(@{i}) {
        @value: (@i / 10 + 0.2);
        transition-delay: @value; // here is this value
    }

    .delay-for-every-child(@i - 1);
}

请帮助我

解决方法

您可以将s添加到0.2：

@iterations: 5;
.delay-for-every-child (@i) when (@i > 0) {
    &:nth-child(@{i}) {
        @value: (@i / 10 + 0.2s);
        transition-delay: @value; // here is this value
    }

    .delay-for-every-child(@i - 1);
}

.delay-for-every-child(@iterations);

编译为：

:nth-child(5) {
  transition-delay: 0.7s;
}
:nth-child(4) {
  transition-delay: 0.6s;
}
:nth-child(3) {
  transition-delay: 0.5s;
}
:nth-child(2) {
  transition-delay: 0.4s;
}
:nth-child(1) {
  transition-delay: 0.3s;
}