-
Notifications
You must be signed in to change notification settings - Fork 11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
duplicate @keyframes generated in CSS #5
Comments
Was the duplicate keyframe issue ever solved? I've been trying to find a solution myself but it doesn't seem possible yet. |
No solution yet. Still researching .... |
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. example: $unique_id: unique-id(); |
cssnano doesn't clean this up? |
This SCSS code producing duplicate
@keyframes bounceOut {
keyframes in generated CSS.how to avoid duplicate keyframes?
The text was updated successfully, but these errors were encountered: