scss/sass shortcode oder simplification

Question

Ich lerne, sass/scss in meinen Projekten zu verwenden, aber im Moment, außer einfachen Variablen, Mixins und so weiter, ist mein Code immer noch ziemlich langatmig.

Ich weiß, es gibt eine Möglichkeit, das Folgende zu vereinfachen, kann aber keine Antwort finden. Ich denke, dass meine Suchen nichts zurückgeben, da ich nicht die richtige Terminologie habe, um zu beschreiben, was ich brauche. Wenn jemand möchte die mir helfen lernen könnten Sie bitte zeigen Sie mir den optimalen Weg, dies zu schreiben:

  li { 
      &.facebook { 
       a { 
        @include image-replace('../svg/icon_social-facebook.svg') 
       } 
      } 
      &.twitter { 
       a { 
       @include image-replace('../svg/icon_social-twitter.svg') 
       } 
      } 
      &.instagram { 
       a { 
       @include image-replace('../svg/icon_social-instagram.svg') 
       } 
      } 
      &.youtube { 
       a { 
       @include image-replace('../svg/icon_social-youtube.svg') 
       } 
      } 
     } 

Vielleicht gibt es keine Möglichkeit, dies zu Kurzschrift? Ich weiß es nicht. Jeder Rat oder jede Information wäre willkommen. Danke im Voraus.

Answer 1

Als Ihr Code enthält eine Menge Inhalt Wiederholung halte ich würde mit einer Schleife - wie:

@each $media in (facebook, twitter, instagram, youtube) { 
    li.#{$media} a { 
    @include image-replace('../svg/icon_social-#{$media}.svg'); 
    } 
} 

oder wenn Sie es vorziehen, Ihre Social-Media-Liste in einer Variablen zu speichern:

$social-medial-list: (facebook, twitter, instagram, youtube); 
@each $media in $social-medial-list { 
    li.#{$media} a { 
    @include image-replace('../svg/icon_social-#{$media}.svg'); 
    } 
}