用于 css3 关键帧动画的 SASS（不是 SCSS）语法

Posted 2023-03-06

【中文标题】用于 css3 关键帧动画的 SASS（不是 SCSS）语法

【英文标题】：SASS (not SCSS) syntax for css3 keyframe animation

【发布时间】：2013-09-24 13:20:11

【问题描述】：

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

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

【问题讨论】：

对了，SASS和SCSS有什么区别？ .scss不是SASS文件的扩展格式吗？

@M98 查看代码示例on the sass site。他们发布了 2 种语法——Scss 和 Sass。两者具有相同的功能，但 Sass 对缩进非常严格，允许它丢失大括号和分号。

提示：当我需要在 scss 中找到我所知道的东西的相应 sass 语法时，我会求助于 [jsonformatter.org/scss-to-sass]。

【参考方案1】：

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

【讨论】：

你能提供从 0 到 360 度的旋转吗？在 css 中很容易，但在 sass 中变得非常复杂。

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

真实数据@vcoppolecchia