真正能用的断点Mixin需支持min/max/between三种模式，统一维护$breakpoints，通过mq($name, $max, $until)扁平化调用，避免嵌套、冗余和数值散落。
直接用 Sass 编写 CSS 本身不会自动提升辅助功能（a11y）支持，关键在于你是否把可访问性规则转化成了可维护、可验证、不被覆盖的样式逻辑。Sass 只是工具，真正起作用的是你用它封装了哪些约束、暴露了哪些钩子、屏蔽了哪些危险操作。
如何用 @mixin 强制 focus-visible 行为
很多项目仍依赖 :focus，但它在鼠标点击后也会触发，导致焦点环“乱闪”。现代做法是只对键盘导航生效，靠 :focus-visible。但浏览器支持不一，需降级。
- 别手动写两套规则——用
@mixin focus-outline($color: var(--focus-color, #007bff))封装完整逻辑 - 内部必须同时输出
:focus:not(:focus-visible)+:focus-visible，并加!important防止被第三方组件覆盖 - 禁止在 mixin 中硬编码
outline: 2px solid #007bff——必须用outline-color单独设色，保留outline-offset和outline-style的可覆盖性 - 若项目需支持 Safari 15.4 以下，得额外加
@supports not selector(:focus-visible)块，用data-focusJS 驱动 fallback
$reduced-motion 变量怎么安全注入媒体查询
用户开启系统“减少运动”后，@media (prefers-reduced-motion: reduce) 应该禁用所有非必要动画。但直接在每个动画 mixin 里写一遍媒体查询，既重复又容易漏。
- 定义全局变量
$reduced-motion: true或false，并在_variables.scss中统一管理 - 所有含
transition或animation的 mixin（如@mixin button-base）必须检查该变量：@if $reduced-motion { transition: none; } - 切勿用
@media嵌套在 mixin 内部——它会生成冗余选择器；正确做法是让 mixin 输出基础样式，再由顶层@media批量重置 - 注意：Sass 无法读取运行时系统设置，所以这个变量只用于开发阶段开关或配合 JS 注入的 class（如
html[data-reduced-motion]）
颜色对比度校验为什么不能只靠 lighten()/darken()
WCAG 要求文本与背景对比度 ≥ 4.5:1（正常文本），但 lighten($color, 20%) 不保证达标，尤其对饱和度低或带 alpha 的颜色。
立即学习“前端免费学习笔记（深入）”；
- 别用 Sass 内置颜色函数做合规判断——它们不模拟人眼感知，也不处理透明度叠加
- 真实对比度计算需用 L*a*b* 或 sRGB 转换，建议用 PostCSS 插件（如
postcss-contrast）在构建时校验，Sass 层只负责传参和兜底 - 可在
@mixin text-contrast($fg, $bg)中内置警告：@if contrast-ratio($fg, $bg) （需自定义 <code>contrast-ratio()函数） - 最稳妥的是把颜色对抽成 map：
$text-pairs: ("primary-on-white": (#007bff, #fff), "white-on-primary": (#fff, #007bff));，编译时遍历校验，避免运行时计算开销
语义化 class 名怎么避免和 a11y 工具冲突
像 .sr-only、.visually-hidden 这类辅助技术专用类，常被误删或覆盖，因为开发者觉得“没用”。Sass 能让它更鲁棒。
- 不要单独写
.sr-only规则——用@mixin sr-only，调用时强制加注释：// a11y: screen reader only, do not remove - 必须同时输出
clip+clip-path+width/height: 1px多套方案，应对不同浏览器对clip的废弃支持 - 禁止用
display: none或visibility: hidden——它们会让元素彻底脱离 a11y 树 - 若项目用 BEM，命名必须明确用途，如
.button__label--sr-only，而非.button__hidden-label，避免被误认为业务逻辑隐藏
最易被忽略的是：Sass 生成的 CSS 一旦上线，就和 HTML 结构、JS 行为、屏幕阅读器版本强耦合。一个 @for 生成的 .col-12 类若没配 role="grid" 或 aria-colcount，栅格再精准也无意义。a11y 不是样式层能独立解决的事，Sass 的责任是不让样式成为障碍——而不是假装它能搞定一切。
