変更された値のパラメータを受け入れる@keyframesアニメーション用のmixin /関数を作成します。

Question

@keyframesアニメーションをカスタマイズするmixin/functionをsassに作成します。私はこのコードを使用してそれを行うことができるように見えますが、より良い方法がありますか？

https://www.sassmeister.com/gist/13a4b5d4df15ca46bd484ab5758f6de0

$animation-name: 1 !global; 
@mixin animate_bg($color1, $color2) { 
    $animation-name: unique-id() !global; 
    @keyframes #{$animation-name} { 
     0% { 
      background-color: $color1; 
     } 
     100% { 
      background-color: $color2; 
     } 
    } 
    @content 
} 

@include animate_bg(#007efe, #cce5ff) { 
    a.finished { 
    animation-duration: 0.25s; 
    animation-name: $animation-name; 
    } 
} 

@include animate_bg(#aabbcc, #ffaabb) { 
    b.finished { 
    animation-duration: 0.25s; 
    animation-name: $animation-name; 
    } 
} 

このCSSミックスインでのご.finishedクラスを含むことにより、わずかSCSS収縮し

@keyframes uz61m5wd4 { 
    0% { 
    background-color: #007efe; 
    } 
    100% { 
    background-color: #cce5ff; 
    } 
} 
a.finished { 
    animation-duration: 0.25s; 
    animation-name: uz61m5wd4; 
} 

@keyframes uz61m5wdd { 
    0% { 
    background-color: #aabbcc; 
    } 
    100% { 
    background-color: #ffaabb; 
    } 
} 
b.finished { 
    animation-duration: 0.25s; 
    animation-name: uz61m5wdd; 
} 

Answer 1

を生成します。しかし、これがまさにあなたが探していたものかどうかは分かりません。

@mixin animate_bg($color1, $color2, $class, $duration) { 
    $animation-name: unique-id() !global; 
    @keyframes #{$animation-name} { 
    0% { 
     background-color: $color1; 
    } 
    100% { 
     background-color: $color2; 
    } 
    } 
    #{$class}.finished { 
    animation-duration: $duration; 
    animation-name: $animation-name; 
    } 
} 

@include animate_bg(#007efe, #cce5ff, a, .25s); 
@include animate_bg(#aabbcc, #ffaabb, b, .25s);