Angular Material 主题的 Scss 范围变量问题

Question

我正在尝试使用自定义版式更改应用程序的字体大小。看来我的变量 $multiplicator 不起作用。如果我在 mat-typography-config 函数中硬编码 $multiplicator 它正在工作。有人对此有见解吗？

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

谢谢！

Answer 1

在 CSS 函数或自定义属性中使用 SASS 变量时，您始终需要 interpolate。 calc()就是这样一个函数。

calc(#{$multiplicator} * 16px)

Angular Material 主题的 Scss 范围变量问题

Scss Scope variable issue with Angular Material theme

angular

sass

angular-material

custom-theme