How to make the compilation of a variable consisting of the substituting value of the variable?

Question

css

Good afternoon.
Can you please tell me how to make the following directive compile?

$btn-fsize: (
  sm: $font-size-sm,
  lg: $font-size-lg
);
$btn-padding: (
  sm: $btn-padding-y-sm,
  lg: $btn-padding-y-lg
);
@each $fkey, $fsize in $btn-fsize {
  @each $pkey, $psize in $btn-padding {
    .btn-#{$fkey} {
      &.rounded {
        @include border-radius($fsize + $psize * 2);
      }
    }
  }
}

with this option with bootstrap, when compiling, it swears as follows

Error: Invalid CSS after "$btn-fsize: ": expected expression (e.g. 1px, bold), was "{"
        on line 32 of C:\WebServers\home\mrcruise\styles.scss
  Use --trace for backtrace.

I think because the source goes like this:

$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                ($font-size-base * 1.25) !default;
$font-size-sm:                ($font-size-base * .875) !default;
$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-y-lg:      .5rem !default;
$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-y-lg:            $input-btn-padding-y-lg !default;

As a result, I want the value of the sum of the font size in the button and the vertical padding to be substituted.

Answer 1

Variable names cannot be generated dynamically in Sass. Transfer values ​​to maps and use them instead of separate variables:

$font-sizes: (
  lg: 16px,
  sm: 14px,
);
@each $type,$size in $font-sizes {
  .btn-#{$type} {
    &.rounded {
      @include border-radius($size);
    }
  }
}