Comment créer des mixins dans saas pour des images clés à l'aide de la transformation

Question

Je travaille dans des fichiers sass. J'ai un problème lié aux mixins. Je crée un mix-ins pour les images clés et je n'ai aucune idée de comment créer. J'ai ajouté mon code ci-dessous. s'il vous plaît consulter mon code et s'il vous plaît créer un mix-ins pour cela. si je copie ce code directement dans le fichier css respecté puis le fichier CSS automatiquement supprimer ces images clés.Je travaille dans les fichiers SASS. J'ai un problème lié aux mixins. Je crée un mix-ins pour les images clés et je n'ai aucune idée de comment créer. J'ai ajouté mon code ci-dessous. s'il vous plaît consulter mon code et s'il vous plaît créer un mix-ins pour cela. si je copie ce code directement dans le fichier css respecté puis le fichier css supprimer automatiquement ces images clés.

.heart-beat { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    height: 25px; 
    width: 25px; 
    z-index: 10; 
    border: 5px solid #ef5350; 
    border-radius: 70px; 
    -moz-animation: heartbit 1s ease-out; 
    -moz-animation-iteration-count: infinite; 
    -o-animation: heartbit 1s ease-out; 
    -o-animation-iteration-count: infinite; 
    -webkit-animation: heartbit 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 


@-moz-keyframes heartbit { 
    0% { 
     -moz-transform: scale(0); 
     opacity: 0.0; } 
    25% { 
    -moz-transform: scale(0.1); 
     opacity: 0.1; } 
    50% { 
     -moz-transform: scale(0.5); 
     opacity: 0.3; } 
    75% { 
     -moz-transform: scale(0.8); 
     opacity: 0.5; } 
    100% { 
     -moz-transform: scale(1); 
     opacity: 0.0; } 
} 

@-webkit-keyframes heartbit { 
    0% { 
     -webkit-transform: scale(0); 
     opacity: 0.0; } 
    25% { 
     -webkit-transform: scale(0.1); 
     opacity: 0.1; } 
    50% { 
     -webkit-transform: scale(0.5); 
     opacity: 0.3; } 
    75% { 
     -webkit-transform: scale(0.8); 
     opacity: 0.5; } 
    100% { 
     -webkit-transform: scale(1); 
     opacity: 0.0; } 
} 

Answer 1

Voici l'exemple du mixin. Cela peut vous aider. Lorsque keyframe() est utilisé pour appeler le préfixe d'image clé, prefixed() est utilisé pour la propriété de transformation.

Pour voir le code de compilation s'il vous plaît utiliser SASS Meister online tool

// This is for iterating `Keyframes`  
     @include keyframes(heartbit){ 

    // This is for iterating `transform` 
     @include prefixed(transform, scale(0.1); 

     } 

Note: Vous devez déclarer en dessous du mixin.

---

// Mixin 

// prefix declarations 
    @mixin prefixed($property, $value) { 

     -webkit-#{$property}: #{$value}; 
     -moz-#{$property}: #{$value}; 
     -ms-#{$property}: #{$value}; 
     -o-#{$property}: #{$value}; 
     #{$property}: #{$value}; 

    } 

    // prefix keyframes 
    @mixin keyframes($name) { 

     @-webkit-keyframes #{$name} { 
      @content; 
     } 

     @-moz-keyframes #{$name} { 
      @content; 
     } 

     @-ms-keyframes #{$name} { 
      @content; 
     } 

     @-o-keyframes #{$name} { 
      @content; 
     } 

     @keyframes #{$name} { 
     @content; 
     } 
    }