less守卫仅在编译期生效，无法响应运行时屏幕尺寸；它只能基于显式定义的变量（如@device: "mobile"）做静态匹配，不能替代@media实现动态响应。
Less守卫语句不直接响应屏幕尺寸
守卫（when）是 Less 的编译时逻辑控制机制，它只在编译阶段起作用，**无法感知运行时的屏幕尺寸或视口变化**。你写 .box when (@screen-width > 768px) { color: red; } 这类代码会直接报错——因为 @screen-width 在 Less 中根本不是内置变量，也无人给它赋值。守卫只能基于你显式定义的变量（比如 @device: "desktop"）做静态判断，和 CSS 媒体查询的动态条件完全不是一回事。
想“根据屏幕尺寸”输出不同 CSS，必须用 @media
真正能响应设备视口的是标准 CSS @media 规则，Less 只负责原样保留或嵌套生成它。常见误操作是试图用守卫替代媒体查询，结果编译失败或样式不生效：
- ❌ 错误：把断点值硬塞进守卫里，比如
@media-width: 768px; .btn when (@media-width > 480px) { ... }—— 守卫不触发@media输出，只会尝试编译一个无意义的条件块 - ✅ 正确：用变量 +
@media组合，例如@sm: 480px; @md: 768px; @media (min-width: @sm) { .btn { padding: 8px; } } - ⚠️ 注意：
@media必须带括号和完整条件，漏空格（如@media(min-width: @sm)）或漏括号（如@media min-width: @sm）都会导致ParseError: missing opening '{'
守卫适合做什么？用在断点分类逻辑里
守卫真正的价值，是在预设的设备类型变量上做分支，配合 Mixin 封装常用媒体查询结构。比如你定义了 @device-type: desktop;，就可以：
.responsive-text(@size) when (@device-type = desktop) {
font-size: @size;
}
.responsive-text(@size) when (@device-type = mobile) {
font-size: @size * 0.8;
}
但注意：这个 @device-type 是你手动设的（如 @device-type: mobile;），不是自动检测的。它适合构建多主题、多输出目标（如 print / screen）的样式体系，而不是响应式布局本身。
混合使用守卫 + 媒体查询的典型场景
当你要为不同断点生成不同规则，又希望复用部分逻辑时，可让 Mixin 接收断点变量，并用守卫控制是否注入某段样式：
- 定义断点变量：
@breakpoint-xs: 480px; @breakpoint-sm: 768px; - Mixin 内部用守卫区分行为：
.col(@cols) when (@cols = 12) { width: 100%; } .col(@cols) when (@cols = 6) { width: 50%; } - 再包裹进媒体查询：
@media (min-width: @breakpoint-sm) { .col(6); }
关键点在于：守卫管「生成什么样式」，@media 管「这些样式在什么条件下生效」——二者职责分明，混用时容易忽略这个边界，导致调试时翻编译后 CSS 才发现规则根本没出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
