Sintaxis SASS (no SCSS) para animación de fotogramas clave css3

Question

Sintaxis SASS (no SCSS) para animación de fotogramas clave css3

¿Hay alguna forma de escribir fotogramas clave en SASS?

Cada ejemplo que he encontrado es en realidad SCSS, incluso cuando dice que es SASS. Para ser claros, me refiero a la que no tiene corchetes rizados.

52

css3 sass keyframe

Author: daviestar, 2013-09-19

Source

1 answers

score 87 · Accepted Answer

Así es como se implementan los fotogramas clave css en la sintaxis Sass:

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

Aquí hay un Sass mixin para agregar prefijos de proveedor:

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

He aquí cómo usar la sintaxis mixin en Sass:

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