时间戳

首页 > 解决方案 > Sass 错误：“...0, 0, -5deg); }”之后的 CSS 无效：预期 1 个选择器或规则，为“{”

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

问题描述

编译时抛出 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）旋转3d（1、0、0、-5度）

to
    ...

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

PS如果可以提供帮助，我正在使用Sublime Text 3...

标签： csssasscompilation

解决方案

在我看来这是你的缩进。Sass 有一个缩进语法——缩进等于 using {}。

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

将您的代码复制到 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)

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

推荐阅读