css3 のキーフレームアニメーションの SASS (SCSSではない) 構文

質問

SASSでキーフレームを書く方法はないのでしょうか？

私が見つけたすべての例は、それがSASSであると書かれていても、実際にはSCSSです。 はっきり言って、中括弧がないものを指しています。

どのように解決するのですか？

Sassの構文でcssのキーフレームを実装する方法を紹介します。

@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

Sassの構文でmixinを使用する方法を説明します。

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