Sass dot notation giving error in mixin using map

See more:

SaaS

i have a mixin with a map list which is checking if the id have common or unique css.
When ever i try to @include mixin with some ids it compiles successfully but when i try to @include it with class it gives an error

What I have tried:

--------- Mixin Code ----------
@mixin bg-animations($defs) {

@if type-of($defs) == "map" {
@if map-has-key($defs, common) {
$common: map-get($defs, common);
$defs: map-remove($defs, common);

#{map-keys($defs)} {
@each $key, $value in $common {
#{$key}: $value;
}
}
}
@each $className, $styles in $defs {
#{$className} {
@each $key, $value in $styles {
#{$key}: $value;
}
}
}
}
}

--------- Give error with this code (want to do it the same way) ----------
$defs: (
#top-bg-animate-0.active: (),
#top-bg-animate-1.active: (),
#top-bg-animate-2.active: (),
common: ( color: blue ) );
@include bg-animations($defs);

--------- Compile Successfully ----------
$defs: (
#top-bg-animate-0#active: (),
#top-bg-animate-1#active: (),
#top-bg-animate-2#active: (),
common: ( color: blue ) );
@include bg-animations($defs);