sass/scss #{$value + s} 更少

Question

有一个变量@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);
}

请帮帮我

Answer 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;
}

sass/scss #{$value + s} 更少

sass/scss #{$value + s} in less

css

sass

less