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