Как сделать компиляцию переменной состоящей из подставляемого значения переменной?

Question

[Дмитрий Дев]

Добрый день.

Подскажите, пожалуйста, как сделать, чтобы скомпилировалась следующая директива?

$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);
			}
		}
	}
}

при таком варианте с bootstrap, при компиляции ругается следующим образом

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.

Как полагаю из-за того, что в исходниках идет следующим образом:

$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;

В результате хочу, чтобы подставилось значение суммы размера шрифта в кнопке и вертикальные padding.

Answer 1

[Flying]

Динамически формировать имена переменных в Sass нельзя. Переносите значения в maps и используйте их вместо отдельных переменных:

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

Comments

[Дмитрий Дев]

($fsize), так полагаю, опечатка?

[Flying]

Да, конечно опечатка, стирал оригинальное название и не убрал один символ

[Flying]

Поправил текст ответа