如何使用變換在saas中爲關鍵幀創建mixin

Question

我正在sass文件中工作。我有一個與mixin有關的問題。我爲關鍵幀創建混合，我不知道如何創建。我在下面添加了我的代碼。請查看我的代碼，併爲此創建一個混合。如果我直接複製這個代碼在符合css文件，然後css文件自動刪除這些關鍵frames.I工作在sass文件。我有一個與mixin有關的問題。我爲關鍵幀創建混合，我不知道如何創建。我在下面添加了我的代碼。請查看我的代碼，併爲此創建一個混合。如果我將此代碼直接複製到css文件中，那麼css文件會自動刪除這些關鍵幀。

.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

以下是mixin的示例。這可能對您有所幫助。 其中keyframe()用於調用關鍵幀前綴，則prefixed()用於transform屬性。

要查看編譯代碼，請使用SASS Meister online tool

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

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

     } 

注意：您需要先聲明這一點混入下方。

---

// 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; 
     } 
    }