mixin - Sintaxis de SASS(no SCSS) para la animación del fotograma clave css3

css mixin w3schools

Question

¿Hay alguna forma de escribir fotogramas clave en SASS?

Cada ejemplo que he encontrado es realmente SCSS, incluso cuando dice que es SASS. Para ser claro, me refiero al que no tiene llaves.

Answer 1

Aquí se explica cómo implementar los fotogramas clave css en la sintaxis de Sass:

@keyframes name-of-animation
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

Aquí hay una mezcla de Sass para agregar prefijos de proveedor:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

Aquí se explica cómo usar la mezcla en la sintaxis de Sass:

+keyframes(name-of-animation)
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)