直接写@media导致断点维护困难，因重复书写断点值需全局替换且min/max混用易冲突；用@mixin封装并配合@content可集中管理、支持嵌套与多条件组合。
为什么直接写 @media 会让断点维护变困难
当你在多个地方重复写 @media (min-width: 768px) 或 @media (max-width: 1023px)，一旦设计稿调整断点值（比如把平板起始点从 768px 改成 769px），就得全局搜索替换——漏掉一处就可能造成布局错乱。更麻烦的是，不同组件里混用 min-width 和 max-width，逻辑容易冲突。
用 @mixin 封装断点，本质是把“数值”和“媒体查询结构”抽离成可复用、可集中管理的单元。关键不是封装本身，而是怎么让这个封装支持嵌套样式、不强制写死选择器、还能应对多条件组合。
@content 是怎么让断点 mixin 真正灵活起来的
没有 @content 的断点 mixin 只能返回媒体查询字符串，你得自己拼接样式块，既难读又易出错。加上 @content 后，它允许你在调用时传入任意样式规则，Sass 会原样注入到生成的 @media 块内部。
例如这个基础写法：
@mixin for-tablet {
@media (min-width: 768px) and (max-width: 1023px) {
@content;
}
}
<p>// 调用
.card {
padding: 1rem;
@include for-tablet {
padding: 1.5rem;
display: grid;
}
}</p>
编译后就是：
.card {
padding: 1rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
.card {
padding: 1.5rem;
display: grid;
}
}
-
@content必须出现在 mixin 定义里，且只能出现一次 - 调用时大括号
{ }内的内容会被完整插入，包括嵌套选择器、其他 mixin、甚至变量计算 - 不能在
@content外部访问调用作用域里的局部变量（这是作用域隔离机制，不是 bug）
如何支持多种断点类型（up / down / only）而不爆炸式增长 mixin 数量
写 for-mobile-up、for-mobile-down、for-mobile-only……十几个 mixin 看似清晰，实则违反 DRY。更好的方式是用参数控制行为，配合 map 存储断点值：
$breakpoints: (
mobile: 320px,
tablet: 768px,
desktop: 1024px,
wide: 1440px
);
<p>@mixin for-size($size, $type: up) {
$width: map-get($breakpoints, $size);
@if $type == up {
@media (min-width: $width) {
@content;
}
} @else if $type == down {
@media (max-width: $width - 1px) {
@content;
}
} @else if $type == only {
$next: map-next($breakpoints, $size);
@if $next {
@media (min-width: $width) and (max-width: map-get($next, 1) - 1px) {
@content;
}
} @else {
@media (min-width: $width) {
@content;
}
}
}
}</p>
使用示例：
.header {
font-size: 1.2rem;
@include for-size(tablet, up) {
font-size: 1.5rem;
}
@include for-size(tablet, only) {
background: #f0f0f0;
}
}
-
map-next()是 Sass 3.3+ 内置函数，需确保环境支持；若用 Dart Sass，可改用map.keys+ 索引逻辑替代 -
$width - 1px是为了规避max-width: 768px和min-width: 768px在 768px 屏幕上同时触发的问题 - 不要试图在 mixin 内做复杂逻辑判断（如自动推导 “tablet-only” 区间），边界情况太多，手动指定
only更可控
常见报错与调试要点
遇到 Invalid CSS after "@include": expected "{", was ";" 或 Content block not allowed here，基本都是 @content 使用姿势不对：
- 调用 mixin 时忘记写大括号
{ }—— 即使里面只有一行样式也必须写 - 在
@function或@if分支里直接调用带@content的 mixin（Sass 不允许在非规则上下文中注入样式块） - mixins 嵌套过深，比如 A mixin 调用 B mixin，B 用了
@content，但 A 没有透传@content—— 这时 B 无法获取内容，直接报错 - Dart Sass 严格区分
@content和普通参数，不能用meta.load-css动态注入，也不支持运行时拼接@content
真正棘手的不是语法，而是断点语义模糊：设计师说“在 iPad 上生效”，但 iPad 有竖屏/横屏、Retina 缩放、第三方浏览器 UA 伪装……最终还是要靠真实设备测试，mixin 只负责把 CSS 写对，不负责适配所有物理像素。
