SASS动画（不是SCSS）不起作用

问题描述：

下午好！我尝试为通过React渲染的微调器制作动画，但它不想在SASS中工作。在SCSS中它正常工作。我试图用很多方式去做，但仍然没有解决方案。微调器显示，但不移动。如果有人有想法，我恳请与我分享。SASS动画（不是SCSS）不起作用

有一个代码：

<div> 
    <svg className="spinner" viewBox="0 0 100 100"> 
     <path d="M 2 50 A 48 48 0 0 0 98 50 L 2 50" className="-ring1" /> 
     <path d="M 98 50 A 48 48 0 0 0 2 50 L 98 50" className="-ring2"/> 
     <circle fill="black" cx="50" cy="50" r="40" /> 
    </svg> 
    </div> 

@keyframes spinner-loading 
0% 
transform: rotateZ(0deg) 
100% 
transform: rotateZ(359deg) 

.spinner 
margin-top: 20% 
margin-left: 30% 
height: 30% 
width: 30% 
animation: spinner-loading 1.5s linear infinite 

.-ring1 
fill: white 

.-ring2 
fill: rgba(white, 0.2)

而且还有一个SCSS的版本：

@keyframes spinner-loading { 
0%{ 
transform: rotateZ(0deg); 
} 

100%{ 
transform: rotateZ(359deg); 
    } 
} 
.spinner { 
    margin-top: 10%; 
    margin-left: 30%; 
    height: 30%; 
    width: 30%; 
    animation: spinner-loading 1.5s linear infinite; 
} 

.-ring1 { 
fill: red; 
} 

.-ring2 { 
fill: rgba(255, 0, 0, 0.2); 
}

答

您可以使用萨斯转换https://www.npmjs.com/package/sass-convert从和不同格式（SCSS，上海社会科学院转换，css），所以你可以将scss工作文件转换为sass文件，并与你所写的文件进行比较以检查出错。

看着它，如果你说的它的工作原理与使用{}限制规则，它可以是一个缩进问题与关键帧的规则SCSS：

@keyframes spinner-loading 
0% 
    transform: rotateZ(0deg) 
100% 
    transform: rotateZ(359deg) 

.spinner 
margin-top: 20% 
margin-left: 30% 
height: 30% 
width: 30% 
animation: spinner-loading 1.5s linear infinite 

.-ring1 
fill: white 

.-ring2 
fill: rgba(white, 0.2)

是的，它工作正常在SCSS语法，但在SASS它不是。我将它转换并收到了与上面介绍的相同的变体，因为它之前使用过。你的意思是SASS语法中的问题吗？ –

是的，Sass语法是基于缩进的，并且可能会出现问题。 – jmtalarn

谢谢。任何想法如何在SASS制作这部动画？我想如果语法上的问题，它将成为另一种实现方式。附：我将SCSS的版本添加到了我的文章中。正如我所说的，它正常工作。 –

SASS动画（不是SCSS）不起作用

相关推荐