Generate responsive CSS property from a list of SCSS key-values

generate_responsive.css

@media (min-width: 1400px) {
  .button-accordion {
    height: 82%; } }

@media (min-width: 768px) {
  .button-accordion {
    height: 74%; } }

@media (min-width: 1400px) {
  .button-accordion--right {
    margin-left: 82%; } }

@media (min-width: 1399px) {
  .button-accordion--right {
    margin-left: 80%; } }

@media (min-width: 1199px) {
  .button-accordion--right {
    margin-left: 75%; } }

@media (min-width: 989px) {
  .button-accordion--right {
    margin-left: 67%; } }

@media (min-width: 767px) {
  .button-accordion--right {
    margin-left: 55%; } }

@media (min-width: 585px) {
  .button-accordion--right {
    margin-left: 47%; } }

@media (min-width: 514px) {
  .button-accordion--right {
    margin-left: 40%; } }

generate_responsive.scss

// = = = = = = = = = = =
// BOOTSTRAP BREAKPOINTS
// = = = = = = = = = = =
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;

// = = = = = = = = = = = = = = = = = = = = =
// MIXIN TO GENERATE PROPERTY MEDIA QUERIES
// = = = = = = = = = = = = = = = = = = = = =
@mixin generate_responsive($property, $breakpoint_values, $breakpoints: false) {
  @if $breakpoints {
    @each $breakpoint, $value in $breakpoint_values {
      @media (min-width: #{$breakpoint}px) {
        #{$property}: $value;
      }
    }
  } @else {
    @each $breakpoint, $value in $breakpoint_values {
      @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
        #{$property}: $value;
      }
    }
  }
}

// = = = = = = = = = = =
// USING THE MIXIN
// = = = = = = = = = = =
.button-accordion {
  @include generate_responsive(
    "height",
    ( xxl: 82%, md: 74%, )
  );
}

.button-accordion--right {
  @include generate_responsive(
    "margin-left",
    ( 1400: 82%, 1399: 80%, 1199: 75%, 989: 67%, 767: 55%, 585: 47%, 514: 40%, ),
    "true"
  );
}