如何解决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,$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)),400)
);
谢谢!
解决方法
在 CSS 函数或自定义属性中使用 SASS 变量时,您总是需要 interpolate。 calc()
就是这样一个函数。
calc(#{$multiplicator} * 16px)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。