scss 使用SASS轻松生成按钮类

Posted 2021-05-17

$social-share-colors: (
    'facebook'   : '#3b5999',
    'linkedin'   : '#0077B5',
    'googleplus' : '#dd4b39',
    'twitter'    : '#55acee'
);

@mixin share-button-colors {
    @each $social, $value in $social-share-colors {
        &.is-#{$social} {
            background: #{$value};
            border-color: #{$value};
            
            &.has-outline {
                color: #{$value};
            }
        }
    }
}

.social-share-button {
  padding: 3px 10px;
  @include share-button-colors;
}

/*
  This could be used with something like:
  <button class="social-share-button is-facebook">Share to Facebook</button>
/*