CODEWITHSUNDEEP
sass
Mr Jonny Wood
Mr Jonny Wood

Reputation: 3854

scss / sass shortcode or simplification

I'm learning to use sass/scss in my projects but currently, other than simple variables, mixins and so forth my code is still pretty long-winded.

I know there's a way to simplify the following but can't find the answer. I think my searches are not returning anything as I don't have the correct terminology to describe what I need. If anyone want's to help me learn could you please show me the optimal way of writing this:

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

Maybe there isn't a way to shorthand this? I don't know. Any advice or info would be welcomed. Thanks in advance.

Upvotes: 1

Views: 169

Answers (1)

Jakob E
Jakob E

Reputation: 4926

As your code contains a lot of repeating content I would consider using a loop – like: 

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

or if you prefer storing your social media list in a variable:

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

Upvotes: 1

Related Questions