Generated by SassMeister.com.

input.scss

@use "sass:list";
@use "sass:map";

$types: ((
  "box": ("padding", "margin-left"),
  "typography": ("font-size", "color"),
));

@mixin component($name, $type, $styles, $scope: "myScope_") {
    .#{$scope + $name} {
        @each $property, $value in $styles {
            @each $type, $properties in $type {
                @if list.index(map.get($types, $type), $property) {
                    #{$property}: $value;
                } @else {
                    @error "TypeError: Property `#{$property}` does not exist on type `#{$type}`";
                }
            }
        }
    }
}

@include component("panel", $type: ("box"), $styles: (
  margin-left: 1rem,
  color: blue
));

@include component("title", $type: ("typography"), $styles: (
    color: red,
    font-size: 2rem,
));

output.css

.myScope_panel {
  margin-left: 1rem;
}

.myScope_title {
  color: red;
  font-size: 2rem;
}

settings.json

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