【问题标题】：SASS or LESS Keyframes percentage loopSASS 或 LESS 关键帧百分比循环
【发布时间】：2019-07-20 02:51:06
【问题描述】：

我正在测试一些特殊的东西，我正在尝试在关键帧内循环以动态地将百分比写入其中。

我已经用 SASS 测试过类似的东西，但它不起作用。

@keyframes test{

    @for $i from 0 through 100 {
        #{$i}% {
            //do special stuff
        } 
        $i: $i + 1;
    }

我希望它输出：

@keyframes test{
    0%{
          ...
    }
    1%{
          ...
    }
    2%{
          ...
    }
    3%{
          ...
    }
    ...
}

但我得到了

Error on line number: 23. Invalid CSS after "    #{$i}%": expected placeholder name, was " {"

我已经在 LESS 中对此进行了测试，但它也不起作用。

    @a: 0%;

    @keyframes test{

       .func (@a, @b, @c);

    }

    .func (@a, @b, @c) when (@a < 100%){  
        (@a){
            //do special stuff
        }

        .func (@a+1, @b, @c);
    }

有人可以帮我吗？

【问题讨论】：

对于 Sass 中的 @for 循环，您不需要在循环中手动添加到 $i。删除$i: $i + 1;，它仍然可以工作。

标签： loops sass less css-animations

【解决方案1】：

如果你像这样解决它，它会起作用：

@keyframes test {
  @for $i from 0 through 100 {
    #{$i * 1%} {
      // do special stuff
    } 
  }
}

【讨论】：

【解决方案2】：

LESS 版本

需要.for 混音

https://github.com/pixelass/more-or-less/blob/master/less/fn/_for.less

通知

这是一个非 inline-js 版本，以实现最大兼容性

输入

@keyframes crazy {
    .for(0,100);.-each(@i){
        @selector: e('@{i}%');

        @{selector} {
            /* do crazy stuff */
        }
    }
}

输出

@keyframes crazy {
  0% {
    /* do crazy stuff */
  }
  1% {
    /* do crazy stuff */
  }
  2% {
    /* do crazy stuff */
  }
  3% {
    /* do crazy stuff */
  }
  4% {
    /* do crazy stuff */
  }
    ...etc
}

【讨论】：

在 LESS 2.7.1 上仍然需要这个 .for 混合吗？
不确定您的意思？ Less 不支持循环：lesscss.org/functions/#functions-overview：如果你有兴趣看看这个github.com/pixelass/homeless，它比“more-or-less”更好更快
我很快就会关闭我的question。但我见过有人 looping 使用原生 LESS。
最终我得到了一个可行的答案（@Harry），而无需安装外部的 Less 库。 LINK

【解决方案3】：

Sass 显然需要一个定义为百分比的值才能正确渲染。此示例生成关键帧来为背景设置动画，但您可以将值列表和属性更改为动画。

SASS


//Given a list of colors
$COLORS: $COLOR-MAIN #f39d75 #c1cecd #f3f57e

// Define a mixin
=animate-color-keyframes($list: $COLORS, $property: background)
    //declare the first keyframe statically
    0%
        #{$property}: nth($list, -1)
    @for $i from 1 through length($list)
        // calculate the keyframe percentage
        $percentage: $i / length($list)
        $keyframe: percentage($percentage)
        // render keyframes
        #{$keyframe}
            #{$property}: nth($list, $i)

// .....
@keyframes change-bg-color
    +animate-color-keyframes

CSS 输出


@keyframes change-bg-color {
  0% {
    background: #f3f57e; }
  25% {
    background: #abf0b3; }
  50% {
    background: #f39d75; }
  75% {
    background: #c1cecd; }
  100% {
    background: #f3f57e; } 
}

【讨论】：