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

scss / sass短代码或简化

1 个答案: