Generated by SassMeister.com.

input.scss

$sns: (
  "apple": (
    "background": #ccc,
    "color": #ccc,
  ),
  "twitter": (
    "background": #ccc,
    "color": #ccc,
  ),
  "facebook": (
    "background": #ccc,
    "color": #ccc,
  ),
  "mixi": (
    "background": #ccc,
    "color": #ccc,
  ),
);

@mixin button-color($background, $color) {
    background: $background;
    color: $color;
}

.sns-button {
  @each $name, $colors in $sns {
    &.sns-button--#{$name} {
      @include button-color(
        $background: map-get($colors, "background"),
        $color: map-get($colors, "color")
      );
    }
  }
}

output.css

.sns-button.sns-button--apple {
  background: #ccc;
  color: #ccc;
}
.sns-button.sns-button--twitter {
  background: #ccc;
  color: #ccc;
}
.sns-button.sns-button--facebook {
  background: #ccc;
  color: #ccc;
}
.sns-button.sns-button--mixi {
  background: #ccc;
  color: #ccc;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}