Angular Material是否有匹配CDK的SASS断点变量或映射？

Angular Material 确实提供了和CDK断点完全匹配的可导入Sass变量与Map，无需自行定义：

导入基础样式文件 #

首先需要导入Material的主题基础文件，才能使用这些断点资源：

@import '@angular/material/theming';

可用的断点资源 #

1. 独立Sass变量 #

直接对应各断点的像素阈值，默认值与CDK完全一致：

• $mat-breakpoint-xs：超小屏幕（默认480px）
• $mat-breakpoint-sm：小屏幕（默认600px）
• $mat-breakpoint-md：中屏幕（默认960px）
• $mat-breakpoint-lg：大屏幕（默认1280px）
• $mat-breakpoint-xl：超大屏幕（默认1920px）

2. 断点Sass Map #

$mat-breakpoints 包含所有断点的键值对，结构如下：

$mat-breakpoints: (
  xs: $mat-breakpoint-xs,
  sm: $mat-breakpoint-sm,
  md: $mat-breakpoint-md,
  lg: $mat-breakpoint-lg,
  xl: $mat-breakpoint-xl
);

示例用法 #

可以直接在自定义样式中使用这些变量或Map，比如：

@import '@angular/material/theming';

.card {
  margin: 8px;

  // 基于中屏幕断点调整样式
  @media (min-width: $mat-breakpoint-md) {
    margin: 16px;
    max-width: 800px;
  }
}

另外还可以使用Material提供的mat-media-breakpoint-up等混合宏，快速生成对齐CDK逻辑的媒体查询：

@import '@angular/material/theming';

.card {
  margin: 8px;

  @include mat-media-breakpoint-up(md) {
    margin: 16px;
    max-width: 800px;
  }
}

内容的提问来源于stack exchange，提问作者Ole