时间戳

首页 > 解决方案 > Angular Material主题的Scss Scope变量问题

angular - Angular Material主题的Scss Scope变量问题

问题描述

我正在尝试使用自定义排版更改应用程序的字体大小。看来我的变量 $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)
  );

谢谢！

标签： angularsassangular-materialcustom-theme

解决方案

在 CSS 函数或自定义属性中使用 SASS 变量时，您总是需要插值。calc()就是这样一个功能。

calc(#{$multiplicator} * 16px)

推荐阅读