CSS 3关键帧动画的SASS（不是SCSS）语法 [英] SASS (not SCSS) syntax for css3 keyframe animation

问题描述

有没有办法在SASS中编写关键帧？

Is there any way to write keyframes in SASS?

我发现的每个示例实际上都是SCSS，即使它说的是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 brackets.

推荐答案

以下是在Sass语法中实现css关键帧的方法：

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

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

这里是一个Sass mixin添加供应商前缀：

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

以下是在Sass语法中使用mixin的方法：

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

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

这篇关于CSS 3关键帧动画的SASS（不是SCSS）语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！