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

Question

SASSでキーフレームを書く方法はありますか?

私が見つけたすべての例は、SASS と表示されていても、実際には SCSS です。明確にするために、中括弧のないものを意味します。

Answer 1

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)