SCSS 本身不能生成无障碍高对比度模式，它只负责编译期计算和组织；真正生效的是最终输出的 CSS，并依赖 @media (prefers-contrast: high) 或自定义 class 切换 + color-scheme 配合。
直接结论：SCSS 本身不能生成无障碍高对比度模式，它只负责编译期计算和组织；真正生效的是最终输出的 CSS，并依赖 @media (prefers-contrast: high) 或自定义 class 切换 + color-scheme 配合。 你写的 SCSS 变量、函数、@if 条件判断，必须被正确注入到媒体查询或根类作用域中，否则只是“纸上谈色”。
为什么直接在 SCSS 里写 $high-contrast-color 不起作用
SCSS 变量是编译时静态值，不会随系统偏好动态变化。比如你定义 $text-color: #333;，再写 $text-color-high: #000;，两者都会被编译成固定 CSS 值，浏览器根本不知道该用哪个。
常见错误现象：
- 在
@media (prefers-contrast: high)外直接使用 SCSS 变量覆盖，结果样式未生效 - 把高对比色值硬编码进组件内部，导致无法全局响应系统设置
- 用 JavaScript 动态切换 class，但 SCSS 没预留命名空间，导致样式冲突或漏覆盖
关键点在于：SCSS 要为运行时条件（如媒体查询、data-theme 属性）提前准备好可复用的样式块，而不是试图“模拟”运行时逻辑。
立即学习“前端免费学习笔记（深入）”；
用 @use + map + @each 构建可维护的对比度令牌体系
把颜色、间距、边框等设计值统一抽象为 map，再用 @each 批量生成 @media 规则，避免手写重复样式。例如：
// tokens/_contrast.scss
$colors: (
text: (
default: #333,
high: #000,
low: #666
),
bg: (
default: #fff,
high: #000,
low: #eee
)
);
@each $role, $map in $colors {
@each $mode, $value in $map {
:root[data-contrast="#{$mode}"] {
--#{$role}-color: #{$value};
}
}
}
这样既保留了 SCSS 的组织能力，又把控制权交给 CSS 自定义属性——后续所有组件都用 color: var(--text-color)，无需改 SCSS 就能响应切换。
注意事项：
- 不要在
@use的模块里直接写 CSS 规则，只导出 map 和函数；规则应在主入口文件中展开 - 确保
data-contrast由 JS 在页面加载时根据matchMedia("(prefers-contrast: high)")设置，否则样式无载体 - IE 不支持
prefers-contrast，需 fallback 到手动开关逻辑，SCSS 中要预留.theme-high-contrast类名分支
如何让 focus outline 和 border 在高对比下真正“可见”
很多项目只改文字色，却忽略表单控件、按钮焦点等关键可访问性节点。SCSS 可以帮你批量强化：
// components/_form.scss
%focus-outline {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
button, input, select, textarea {
@extend %focus-outline;
@media (prefers-contrast: high) {
outline-width: 3px;
outline-style: solid;
}
}
更稳妥的做法是用 CSS 自定义属性兜底：
- 定义
--focus-color: #007bff;和--focus-color-high: #000; - 在
:root[data-contrast="high"]中重置--focus-color: var(--focus-color-high) - 所有用到 focus 的地方统一用
outline-color: var(--focus-color)
这样即使未来增加深色+高对比组合模式，也只需扩展 map，不用动任何组件样式。
最容易被忽略的一点：高对比度不是“全黑背景+纯白字”就完事。WCAG 要求文本与背景对比度 ≥ 15:1（AA 级），而很多设计师随手设的 #000 on #fff 实际是 21:1，反而造成眩光。SCSS 的 contrast() 函数可以校验，但必须配合真实渲染环境测试——编译出来的 CSS 是否真被浏览器识别并应用，永远比 SCSS 写得有多漂亮更重要。
