执行中断；在SCSS中

我有一些密码

帕格：

SCSS：

问题是计数器从

100

开始计数，当它达到

50

时，计数器将停止-

100%{content:'stop'；}

，动画将结束（现在它继续

49%{content:'51'；}100%{content:'stop'；}51%{content:'49'；}

）

问题：是否有类似于

break对于类似js的SCS


p.S:
@break未按预期工作

PPS:
根据俄语问题上的答案，您可以使用SCSS创建数字

演示：

SCSS：

CSS输出（使用Autoprefixer）：

不知道为什么，但让您的代码使用@if$i>49而不是等号。也许有人能解释一下。嗯，真的很有用。。。但是汇编不是很漂亮，我可以假设他没有进入第50位，并立即跳到下一个数字
div(data-counter="100")

$start: 100;
$end: 20;

div:before {
  content: attr(data-counter);
  animation: countdown 10s steps(1, start) forwards;
}

@keyframes countdown {
  @for $i from 1 through $start { 
    @if $i == 50 {
      100% {
        content: 'Stop';
      }
    } @else {
      #{$i}% {
        content: '#{($start - $i)}';
      }
    }
  } 
}

@function countdown-numbers($from: 100, $through: 0){
    $str: '';
    @for $i from $from through $through { $str: $str + '#{$i}\A'; }
    @return $str;
}


div {
    line-height: 1.2;
    height: 1.2em;
    overflow: hidden;
    &::after {
        display: inline-block;
        white-space: pre-wrap;
        // creates 50 numbers 100\A 99\A ... 51\A
        // and add STOP to the string 
        content: countdown-numbers(100, 51) + STOP;
        // run animation in 50 steps (don't count start) 
        animation: countdown 10s steps(50) forwards;       
    }
}
@keyframes countdown {
    to { transform: translateY(calc(1.2em - 100%)) }
}

div {
  line-height: 1.2;
  height: 1.2em;
  overflow: hidden;
}
div::after {
  display: inline-block;
  white-space: pre-wrap;
  content: "100\a 99\a 98\a 97\a 96\a 95\a 94\a 93\a 92\a 91\a 90\a 89\a 88\a 87\a 86\a 85\a 84\a 83\a 82\a 81\a 80\a 79\a 78\a 77\a 76\a 75\a 74\a 73\a 72\a 71\a 70\a 69\a 68\a 67\a 66\a 65\a 64\a 63\a 62\a 61\a 60\a 59\a 58\a 57\a 56\a 55\a 54\a 53\a 52\a 51\aSTOP";
 -webkit-animation: countdown 5s steps(50) forwards;
         animation: countdown 5s steps(50) forwards;
}

@-webkit-keyframes countdown {
  to {
    -webkit-transform: translateY(calc(1.2em - 100%));
            transform: translateY(calc(1.2em - 100%));
  }
}

@keyframes countdown {
  to {
    -webkit-transform: translateY(calc(1.2em - 100%));
            transform: translateY(calc(1.2em - 100%));
  }
}