SASS（非SCSS）语法用于CSS3关键帧动画

Question

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

我找到的每个示例实际上都是SCSS，即使它说是SASS也是如此。明确一下，我指的是没有花括号的那一个。

- daviestar

---

顺便问一下，SASS和SCSS有什么不同？.scss不是SASS文件的扩展名格式吗？ - Mohammad Kermani

@M98请查看Sass官网上的代码示例。该网站发布了两种语法-Scss和Sass。两种语法具有相同的功能，但Sass对缩进要求更严格，允许省略花括号和分号。 - daviestar

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

Answer 1

以下是如何在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)

- daviestar

---

你能提供一个从0度到360度旋转的代码吗？在CSS中很容易实现，但在Sass中变得非常复杂。 - Tarun

@daviestar 关于 Sass mixin 添加 浏览器前缀：我认为使用某种类型的 构建工具（例如 Gulp 或 Grunt）来处理浏览器前缀也是一个好主意。一个好的选择可能是 gulp-autoprefixer。 - vcoppolecchia

真实的数据 @vcoppolecchia - daviestar

Answer 2

创建关键帧的方法如下：

@keyframes name
  0%
    transform: scale(1)
  50%
    transform: scale(1.5)
  100%
    transform: scale(1)

然后使用

.example-btn
  animation: name 2s linear infinite

如果您将关键帧存储在其他的.sass文件中，您只需要导入这个文件（包含关键帧），一切都会正常工作。

- KrystianKasp98