Kann ich IDs für Elemente in einem Keyframe angeben, um CSS mit sass zu reduzieren?

Question

Ich bin mir sicher, dass dies eine neue Frage ist, aber ich habe erst kürzlich damit begonnen, Sass in meinen Projekten zu implementieren und ich würde gerne wissen, ob es einen einfacheren/effizienteren Weg gibt, diesen Code mit Sass zu realisieren Eure Hilfe :) .

Ich möchte so gruppieren, dass ich die 100% Keyframe-Breite nach ID identifizieren kann, anstatt die Animationszeile und den Keyframe für jede neu zu schreiben.

span.underline { 
    display:block; 
    width:calc(100% - 130px); 
    height:2px; 
    background-color:transparent; 
    position:absolute; 
    left:41px; 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#acctInfo { 
    animation: acctInfo 0.3s ease-out forwards; 
    background: #FFF; 
} 

@keyframes acctInfo { 
    0% { 
    width:0; 
    } 
    100% { 
    width:calc(100% - 130px); 
    } 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#replenish { 
    animation: replenish 0.3s ease-out forwards; 
    background: #FFF; 
} 

@keyframes replenish { 
    0% { 
    width:0; 
    } 
    100% { 
    width:calc(100% - 60px); 
    } 
} 

#topNav .navbar-nav>li>a:hover > span.underline#more { 
    animation: more 0.3s ease-out forwards; 
    background: #FFF; 
} 

@keyframes more { 
    0% { 
    width:0; 
    } 
    100% { 
    width:calc(100% - 65px); 
    } 
} 

Answer 1

Es ist nicht einfach, ich finde keine Möglichkeit, den ID-Selektor zu extrahieren. Das Meiste, das ich habe, ist eine Mischung, die ich den id Namen als ein Argument übergab. Ich versuche auch, die id Variable von $name innerhalb des Mixin hinzuzufügen und keine Notwendigkeit, in den Selektor zu schreiben, aber ich bekomme den Selektor zweimal (mit und ohne id).

SASS

@mixin animation($name) { 
    animation: $name 0.3s ease-out forwards; 
    @keyframes #{$name} { 
    0% { 
     width: 0; 
    } 
    100% { 
     @if $name=="replenish" { 
     width: calc(100% - 60px); 
     } 
     @else if $name=="more" { 
     width: calc(100% - 65px); 
     } 
    } 
    } 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#replenish { 
    @include animation(replenish); 
    background: #FFF; 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#more { 
    @include animation(more); 
    background: red; 
} 

OUTPUT

#topNav .dropdown-menu > li > a:hover > span.underline#replenish { 
    animation: replenish 0.3s ease-out forwards; 
    background: #FFF; 
} 
@keyframes replenish { 
    0% { 
    width: 0; 
    } 
    100% { 
    width: calc(100% - 60px); 
    } 
} 
#topNav .dropdown-menu > li > a:hover > span.underline#more { 
    animation: more 0.3s ease-out forwards; 
    background: red; 
} 
@keyframes more { 
    0% { 
    width: 0; 
    } 
    100% { 
    width: calc(100% - 65px); 
    } 
} 

Answer 2

Aufbauend auf was vorgeschlagen blonfu ich persönlich ein zweites Argument für die Breite Wert hinzufügen würde, so dass Sie die mixin wiederverwenden können ohne dass mehr if/else-Fälle erstellt werden müssen:

@mixin animation($name, $width) { 
    animation: $name 0.3s ease-out forwards; 

    @keyframes #{$name} { 
    0% { 
     width: 0; 
    } 
    100% { 
     width: calc(100% - $width); 
    } 
    } 

}