CSS 3关键帧动画的SASS（不是SCSS）语法

有什么方法可以在SASS中编写关键帧？

我发现的每个示例实际上都是SCSS，即使它说是SASS。需要明确的是，我的意思是没有大括号的那个。

css sass keyframe

— 戴维斯塔
source

顺便说一下，SASS和SCSS有什么区别？不是.scssSASS文件的扩展名格式吗？

— Mohammad Kermani

@ M98在sass网站上查看代码示例。他们发布了2种语法-Scss和Sass。两者都具有相同的功能，但是Sass严格限制缩进，以使其失去curlies括号和分号。

— daviestar

提示：当我需要找到我在scss中知道的某些东西的对应的sass语法时，我转向[ jsonformatter.org/scss-to-sass]。

— Frank Nocke

110

这是使用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)

— 戴维斯塔
source

您可以提供从0到360度转换的旋转。它在css中非常容易，但是在sass中变得非常复杂。

— 塔伦（Tarun）2016年

@daviestar关于使用Sass混合来添加供应商前缀的观点：在我看来，使用某种构建工具（例如Gulp或Grunt）来处理供应商前缀也是一个好主意。一个很好的可能是gulp-autoprefixer。

— vcoppolecchia

真正的dat @vcoppolecchia

— daviestar