web-dev-qa-db-ja.com

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

SASSでキーフレームを記述する方法はありますか？

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

css3sasskeyframe
60
daviestar

Sass構文でcssキーフレームを実装する方法は次のとおりです。

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

ベンダープレフィックスを追加するSassミックスインを次に示します。

=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)
99
daviestar