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

【问题标题】：sass/scss #{$value + s} in lesssass/scss #{$value + s} in less
【发布时间】：2020-08-22 03:43:45
【问题描述】：

有一个变量@value: 5; 我想把它放在转换延迟中。（转换延迟：@value;）

但transition-delay属性只能包含秒

@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);
}

请帮帮我

【问题讨论】：

标签： css sass less

【解决方案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;
}

【讨论】：