selectors - Ejecutar el descanso; en SCSS

selectors sass

Question

Tengo un código.

Doguillo:

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

El problema es que el contador cuenta desde 100 y cuando llega a 50 , el contador se detendrá: 100% {content: ''Stop''; } 100% {content: ''Stop''; } Y la animación finalizaría (ahora continúa 49% {content: ''51'';} 100% {content: ''Stop'';} 51% {content: ''49'';} ).

Pregunta: ¿Hay algo así como un break; para scss como en js?

codepen

PD: @break; no funciona como se desea

PPS: la misma pregunta en ruso.

Answer 1

Según la respuesta publicada en la pregunta de Rusia, puede usar SCSS para crear los números

Demostración: 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%)) }
}

Salida CSS (usando 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%));
  }
}