在Angular的HTML或TS文件中引用SCSS变量值

Question

我正在研究是否可以在Angular的HTML或TS中使用SCSS变量值。

例如

我在 _variable.scss 文件中有一个名为$mdBreakpoint: 992px;的变量

在html中我有一个条件

[ngClass]="{'col-sm-3': innerWidth >= 992}"

992 与$mdBreakpoint

的值相同

我的问题是可以在HTML条件下引用$mdBreakpoint。

我正在使用Angular 8

Answer 1

您可以创建一个包含mdBreakpoint值的变量，然后使用它作为HTML模板：

TypeScript：

mdBreakpoint = 992;

HTML：

[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"

更新：

似乎现在无法访问SASS，但是如果您想拥有全局变量之类的东西，则可以在environment.ts文件中创建变量并在任何组件中使用：

export const environment = {
  production: false,
  MD_BREAKPOINT: 992 
};

以及您的组件中

export class YourComponent {  
  title = 'myapp works!';
  mdBreakpoint = environment.MD_BREAKPOINT;
}

Answer 2

Angular，html或sass不直接支持它。您必须先编写一些逻辑，才能访问html模板中的scss变量。

如果您想了解更多有关如何执行此操作的信息，请参见以下答案：access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)