L'animation SASS (pas SCSS) ne fonctionne pas

Question

Bon après-midi! J'essaie de faire une animation pour spinner qui est rendue via React, mais elle ne veut pas travailler dans SASS. Dans SCSS, cela fonctionne correctement. J'ai essayé de le faire de plusieurs façons, mais je n'ai toujours pas de solution. Le spinner s'affiche, mais ne bouge pas. Si quelqu'un a une idée, je demande à partager avec moi.

Il y a un code:

<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) 

Et il y a une version de 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); 
} 

Answer 1

Vous pouvez utiliser Sass convertirhttps://www.npmjs.com/package/sass-convert convertir et aux différents formats (SCSS, SASS , css) de sorte que vous pouvez convertir le fichier de travail scss à sass et comparer avec celui que vous avez écrit pour vérifier ce qui ne va pas.

regarder et si vous le dire travaille avec SCSS qui utilise {} pour limiter les règles, il peut être un problème de indenter avec vos règles images clés:

@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)