Есть такой код.
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)}';
}
}
}
}
Задача в том, что счетчик отсчитывает со 100
и при достижении 50
-и счетчик бы останавливался, т.е 100% { content: 'Stop'; }
и анимация бы заканчивалась (сейчас она продолжается 49% { content: '51'; } 100% { content: 'Stop'; } 51% { content: '49'; }
).
Вопрос: Есть ли для scss что-то вроде break;
как в js?
P.S: @break;
не срабатывает как хотелось бы.