如何将Codepen上的CSS动态文本关键帧动画转换为可运行的SCSS？

嘿，我明白你把那个项目的CSS转成SCSS时遇到报错的困扰了！其实问题出在SCSS对@keyframes规则内属性的解析逻辑上——虽然原CSS写法在纯CSS环境下合法，但SCSS的语法检查对细节更严格。下面是调整好的可运行SCSS代码，以及对应的说明：

正确的SCSS代码 #

#spin {
  color: red;

  &:after {
    content: "";
    animation: spin 2s linear infinite;
  }
}

@keyframes spin {
  0% { content: "ipsum"; }
  10% { content: "dolor"; }
  20% { content: "sit"; }
  30% { content: "amet"; }
  40% { content: "consectetur"; }
  50% { content: "adipisicing"; }
  60% { content: "elit"; }
  70% { content: "Hic"; }
  80% { content: "atque"; }
  90% { content: "fuga"; }
}

对应的HTML结构（无需修改） #

<p>Lorem <span id="spin"></span>!</p>

为什么原代码会报错？ #

原CSS的写法在纯CSS环境下没问题，但SCSS编译器在解析@keyframes里的content属性时，偶尔会因为语法解析优先级的问题抛出错误。上面的SCSS代码采用了SCSS常用的嵌套写法（把:after伪元素嵌套在#spin选择器内），同时确保所有content的值都用双引号包裹，完美适配SCSS的语法规则，能正常编译运行。

替换这段代码后，就能实现和原项目一样的文字轮换动画效果啦！

内容的提问来源于stack exchange，提问作者Nebulo