Run break; in SCSS

Question

I have a code.

Pug:

div(data-counter="100") 

SCSS:

 $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)}'; } } } } 

The problem is that the counter is calculated from 100 , and when it reaches 50 , the counter will stop - 100% {content: 'Stop'; } 100% {content: 'Stop'; } And the animation will end (now it continues 49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';} ).

Question: Is there something like break; for scss, as in js?

codepen

PS: @break; not working as desired.

PPS: The same question is in Russian.

Answer 1

Based on the answer posted on the Russian question, you can use SCSS to create numbers

Demo: https://codepen.io/jakob-e/pen/mwYKpV

SCSS:

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

CSS output (using Autoprefixer):

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