Search code examples
angularsassangular-materialcustom-theme

Scss Scope variable issue with Angular Material theme

I'm trying to change the fontsize of the app with a custom typography. It seems that my variable $multiplicator is not working. If i hardcode the $multiplicator in the mat-typography-config function it is working. Any one has an insight about this?

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

If I'm hardcoding this way it works

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

Thank you!

Solution

  • You always need to interpolate, when using SASS variables in CSS functions or custom properties. calc() is such a function.

    calc(#{$multiplicator} * 16px)