duplicate @keyframes generated in CSS

[xmlking]

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?

[josephfusco]

Was the duplicate keyframe issue ever solved? I've been trying to find a solution myself but it doesn't seem possible yet.

[xmlking]

No solution yet. Still researching ....

[josephfusco]

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
}

[bpongy]

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} {
....

[romulof]

cssnano doesn't clean this up?