Sass 错误：“...0, 0, -5deg); }”之后的 CSS 无效：预期 1 个选择器或规则，为“{”[关闭]

Question

编译时抛出 Sass 错误：

@keyframes flipInX

    from
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
        animation-timing-function: ease-in
        opacity: 0

    40%
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
        animation-timing-function: ease-in

    60%
        opacity: 1
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg)

    80%
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)

    to
        transform: perspective(400px)

错误指向这一行：

    ...
80%

变换：透视图(400px) rotate3d(1, 0, 0, -5deg)

to
    ...

此错误过去在不同的地方抛出，并在切换行或重新键入选项卡和/或新行键入后消失。这似乎是一个错误，这很烦人。我该如何解决这个问题？

附：如果有帮助的话，我正在使用 Sublime Text 3...

Answer 1

我在这里找到了这个问题的解决方案：How do I force Sublime Text to indent two spaces per tab?

问题在于我的编辑器中的缩进不正确（感谢Daniel Sixl）。在 Sublime Text 中更改首选项可以解决问题（我希望它永远不会再出现）。偏好是：

"tab_size": 2,
"translate_tabs_to_spaces": true,
"detect_indentation": false,

Answer 2

在我看来这是您的缩进。 Sass 有缩进语法——缩进等同于使用{}。

在您的示例中，缺少缩进，因此无法正确编译代码。

将您的代码复制到 CodePen 中并给它缩进正在为我修复错误：

@keyframes flipInX
  from
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
      animation-timing-function: ease-in
      opacity: 0
  40%
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
      animation-timing-function: ease-in      
  60%
      opacity: 1
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg)
  80%
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  to
      transform: perspective(400px)

缩进由两个空格组成，没有制表符。