Синтаксис SASS (не SCSS) для анимации ключевого кадра css3

Есть ли способ записать ключевые кадры в SASS?

Каждый пример, который я нашел, на самом деле является SCSS, даже когда он говорит SASS. Чтобы быть ясным, я имею в виду тот, у которого нет фигурных скобок.

Ответы

Ответ 1

Вот как вы реализуете ключевые кадры css в синтаксисе Sass:

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

Здесь добавлен Sass mixin для добавления префиксов добавленных поставщиков:

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

Здесь, как использовать mixin в синтаксисе Sass:

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