hmps
duplicate @keyframes generated in CSS
This SCSS code producing duplicate @keyframes bounceOut { keyframes in generated CSS.
.sumo1 {
@include bounceOut($duration: 1s);
}
.sumo2{
@include bounceOut($duration: 2s);
}
how to avoid duplicate keyframes?
Was the duplicate keyframe issue ever solved? I've been trying to find a solution myself but it doesn't seem possible yet.
I don't think it is possible at the current state of scss. The only resolution I've come up with would be to set the animation at the root instead of nested as a property per each item. This would require a lot of restructering but would look something like this.
//take classes and IDs as arguments
@mixin bounceIn($class){
#{$class}{
//set animation
}
@keyframes BounceIn{
//keyframe stuff
}
}
//set animation once at root of file to include all objects we want with bounceIn
@include bounceIn($class: ".objectA, .objectB, #thisToo");
//do styling on each object without the animation since it's being declared globally
.objectA{
color:blue;
//normal styles
}
.objectB{
color:red;
//normal styles
}
#thisToo{
padding:10px 30px;
//normal styles
}
It's possible with unique-id() sass function. http://sass-lang.com/documentation/Sass/Script/Functions.html#unique_id-instance_method
example:
$unique_id: unique-id(); animation: wobble_#{$unique_id} .... .... @keyframes wobble_#{$unique_id} { ....
