应使用混合宏而非函数封装断点逻辑，因 Sass 媒体查询中禁止调用自定义函数；需定义 $grid-breakpoints map 并编写 @mixin media-breakpoint-up($name)，配合 @include 调用，确保可维护性与编译正确性。
怎样用 media-query 函数封装断点逻辑
直接写 @media (min-width: 768px) 很容易重复、难维护。Sass 里不推荐手敲媒体查询，而是用函数 + 混合宏配合 map 管理断点。核心是定义一个断点 map，再写一个 media-query 函数（返回字符串）或混合宏（直接输出 CSS），前者适合动态拼接，后者更常用。
常见错误是把断点值硬编码在多个 @include media-breakpoint-up(md) 里，结果改一个值要搜全项目；或者用函数返回字符串后，忘记用 @media #{function()} 的插值语法，导致编译报错 Invalid CSS after "...": expected "{", was ";"。
- 断点 map 建议统一放在
_variables.scss：$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
- 写混合宏比函数更稳妥：
@mixin media-breakpoint-up($name) { @if map-has-key($grid-breakpoints, $name) { $value: map-get($grid-breakpoints, $name); @media (min-width: $value) { @content; } } } - 调用时直接
@include media-breakpoint-up(md) { ... }，语义清晰，也避免插值出错
为什么不用 min-width 函数而用混合宏
有人想封装成 @function min-width($name) { @return map-get($grid-breakpoints, $name); }，然后写 @media (min-width: min-width(md)) { ... } —— 这在 Dart Sass 1.20+ 后会报错，因为媒体查询条件里不允许调用自定义函数（只允许内置函数如 min()、max()）。Sass 解析器在解析 @media 时处于“静态上下文”，函数调用被禁止。
所以必须用混合宏，它是在编译时展开为真实 CSS，绕过该限制。
立即学习“前端免费学习笔记（深入）”；
- 错误示范：
@media (min-width: min-width(md)) { ... }→ 编译失败，提示Functions may not be called in a media query expression - 正确路径：只用混合宏做媒体查询封装，函数仅用于计算类场景（比如生成 padding 值）
- 如果真需要动态生成查询字符串（例如构建工具链中生成 CSS-in-JS），可用函数，但必须确保不在
@media内直接调用
如何支持多条件媒体查询（比如 hover + width）
基础混合宏只处理单维度宽度，但实际项目常要组合条件，比如 @media (hover: hover) and (min-width: 768px)。这时不能靠简单扩展 media-breakpoint-up，得另建一个更灵活的混合宏。
关键在于参数设计：接受一个列表或 map，让调用者自由组合，而不是预设“up/down/between”。
- 推荐写法：
@mixin media($queries...) { $query-list: (); @each $q in $queries { @if type-of($q) == 'string' { $query-list: append($query-list, unquote($q), comma); } @else if type-of($q) == 'map' { @each $feature, $value in $q { $query-list: append($query-list, '(' + $feature + ': ' + $value + ')', comma); } } } @media #{$query-list} { @content; } } - 调用示例：
@include media('(hover: hover)', '(min-width: 768px)') { .btn { transition: background-color 0.2s; } } - 注意
unquote()是为了去掉字符串引号，否则生成@media ("(hover: hover)")会无效
Sass 4.0+ 之后的 @use 规则对断点模块的影响
用 @use 替代 @import 后，变量和混合宏默认私有，必须显式导出。如果你把断点 map 和混合宏都写在 _breakpoints.scss 里，又没加 @forward 或 @use "breakpoints" as *，就会遇到 Undefined variable "$grid-breakpoints"。
这不是语法问题，是作用域变更带来的隐性依赖断裂。
- 必须在
_breakpoints.scss底部加：@export; $grid-breakpoints: (...); @mixin media-breakpoint-up(...) { ... } - 主文件里用
@use 'breakpoints' with ($grid-breakpoints: (...));可覆盖默认断点，但注意：覆盖只对当前@use生效，其他模块不会继承 - 若多个模块都要用，建议抽成独立包，或统一在入口
index.scss中@use并@forward
@include media-breakpoint-up(md) { @include theme-dark { ... } }），开发者工具里看到的 CSS 行号会跳转到混合宏定义处，而不是你写的样式块。这时候最好在混合宏里加 // @debug 'in media-breakpoint-up(#{$name})' 辅助定位。 
