dikey58
@dikey58
Самоучка - web-разработчик

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

Добрый день.

Подскажите, пожалуйста, как сделать, чтобы скомпилировалась следующая директива?
$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.
  • Вопрос задан
  • 103 просмотра
Решения вопроса 1
@Flying
Динамически формировать имена переменных в Sass нельзя. Переносите значения в maps и используйте их вместо отдельных переменных:
$font-sizes: (
  lg: 16px,
  sm: 14px,
);
@each $type,$size in $font-sizes {
  .btn-#{$type} {
    &.rounded {
      @include border-radius($size);
    }
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы