Блог

Я пытаюсь изменить размер шрифта приложения с помощью пользовательской типографии. Кажется, что моя переменная $multiplicator не работает. Если я жестко закодирую мультипликатор $ в функции mat-typography-config, он работает. У кого-нибудь есть представление об этом?

 $multiplicator: 3;
$custom-typography-test: mat-typography-config(
    $font-family:   'Roboto, "Helvetica Neue", sans-serif',
    $display-4:     mat-typography-level(calc($multiplicator * 112px)),
    $display-3:     mat-typography-level(calc($multiplicator * 56px)),
    $display-2:     mat-typography-level(calc($multiplicator * 45px)),
    $display-1:     mat-typography-level(calc($multiplicator * 34px)),
    $headline:      mat-typography-level(calc($multiplicator * 24px)),
    $title:         mat-typography-level(calc($multiplicator * 20px)),
    $subheading-2:  mat-typography-level(calc($multiplicator * 16px)),
    $subheading-1:  mat-typography-level(calc($multiplicator * 15px)),
    $body-2:        mat-typography-level(calc($multiplicator * 14px)),
    $body-1:        mat-typography-level(calc($multiplicator * 14px)),
    $caption:       mat-typography-level(calc($multiplicator * 12px)),
    $button:        mat-typography-level(calc($multiplicator * 14px)),
    // Line-height must be unit-less fraction of the font-size.
    $input:         mat-typography-level(inherit, 1.125, 400)
  );
 

Если я жестко кодирую этот способ, он работает

 $multiplicator: 3;
$custom-typography-test: mat-typography-config(
    $font-family:   'Roboto, "Helvetica Neue", sans-serif',
    $display-4:     mat-typography-level(calc(3* 112px)),
    $display-3:     mat-typography-level(calc(3* 56px)),
    $display-2:     mat-typography-level(calc(3* 45px)),
    $display-1:     mat-typography-level(calc(3* 34px)),
    $headline:      mat-typography-level(calc(3* 24px)),
    $title:         mat-typography-level(calc(3* 20px)),
    $subheading-2:  mat-typography-level(calc(3 * 16px)),
    $subheading-1:  mat-typography-level(calc(3* 15px)),
    $body-2:        mat-typography-level(calc(3* 14px)),
    $body-1:        mat-typography-level(calc(3* 14px)),
    $caption:       mat-typography-level(calc(3 * 12px)),
    $button:        mat-typography-level(calc(3 * 14px)),
    // Line-height must be unit-less fraction of the font-size.
    $input:         mat-typography-level(inherit, 1.125, 400)
  );
 

Спасибо!

Вам всегда нужно выполнять интерполяцию при использовании переменных SASS в функциях CSS или пользовательских свойствах. calc() есть такая функция.

 calc(#{$multiplicator} * 16px)