scss/sass簡碼或簡化

Question

我正在學習在我的項目中使用sass/scss，但目前，除了簡單變量，mixins等外，我的代碼仍然非常冗長。

我知道有一種方法可以簡化以下但找不到答案。我認爲我的搜索沒有返回任何內容，因爲我沒有正確的術語來描述我需要的內容。如果有人想對幫助我學習可以請你告訴我寫這篇的最佳方式：

  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') 
       } 
      } 
     } 

也許沒有辦法速記嗎？我不知道。任何建議或信息將受到歡迎。提前致謝。

Answer 1

當你的代碼中包含大量重複內容的我會考慮使用一個循環 - 這樣的：

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

或者如果你喜歡保存你的社交媒體列表中的一個變量：

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