如何在SCSS中获取Angular Material断点值？

方法1：使用CSS自定义属性（推荐） #

这种方式直接复用Angular CDK官方定义的断点数值，无需手动同步，能避免版本更新时的数值不一致问题。

步骤：

1. 在根组件（如AppComponent）中导入CDK的断点宽度常量，注入为全局CSS变量：

import { Component, OnInit } from '@angular/core';
import { SMALL_WIDTH, MEDIUM_WIDTH, LARGE_WIDTH, XLARGE_WIDTH } from '@angular/cdk/layout/breakpoints';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const root = document.documentElement;
    root.style.setProperty('--cdk-breakpoint-small', `${SMALL_WIDTH}px`);
    root.style.setProperty('--cdk-breakpoint-medium', `${MEDIUM_WIDTH}px`);
    root.style.setProperty('--cdk-breakpoint-large', `${LARGE_WIDTH}px`);
    root.style.setProperty('--cdk-breakpoint-xlarge', `${XLARGE_WIDTH}px`);
  }
}

2. 在任意SCSS文件中直接使用这些变量：

/* 小屏幕适配样式 */
@media (max-width: var(--cdk-breakpoint-small)) {
  .container {
    padding: 0 16px;
  }
}

/* 中等屏幕及以上样式 */
@media (min-width: calc(var(--cdk-breakpoint-medium) + 1px)) {
  .sidebar {
    width: 250px;
  }
}

/* 直接用数值设置元素属性 */
.card {
  max-width: var(--cdk-breakpoint-large);
  margin: 0 auto;
}

方法2：手动定义SCSS变量（适用于无需动态更新的场景） #

如果偏好纯SCSS方案，可以手动将CDK的断点数值定义为SCSS变量，实现全局复用。

1. 创建全局SCSS变量文件（如src/styles/breakpoints.scss）：

// 同步Angular CDK官方断点数值
$cdk-breakpoint-small: 599.98px;
$cdk-breakpoint-medium: 899.98px;
$cdk-breakpoint-large: 1199.98px;
$cdk-breakpoint-xlarge: 1599.98px;

2. 可选：在angular.json中配置全局导入，避免每个文件手动导入：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/styles"]
            }
          }
        }
      }
    }
  }
}

3. 在SCSS文件中使用变量：

// 未配置全局导入时，需手动引入
@import 'breakpoints';

@media (max-width: $cdk-breakpoint-small) {
  .mobile-nav {
    display: block;
  }
}

注意：这种方式需要在CDK版本更新时手动核对并同步断点数值，防止出现不一致。

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