SASS (not SCSS) syntax for css3 keyframe animation

前端 未结 1 1638
野的像风
野的像风 2021-01-31 13:45

Is there any way to write keyframes in SASS?

Every example I have found is actually SCSS, even when it says it\'s SASS. To be clear, I mean the one with no curly bracke

1条回答
  •  醉梦人生
    2021-01-31 13:58

    Here is how you implement css keyframes in the Sass syntax:

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

    Here is a Sass mixin to add vendor prefixes:

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

    Here's how to use the mixin in Sass syntax:

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

    0 讨论(0)
提交回复
热议问题