Less不提供新响应式语法，仅原样输出@media；可用变量统一管理断点、参数化混合封装逻辑、避免深层嵌套和编译时设备探测。
Less 本身不提供新的响应式语法，它只是把 @media 规则原样输出到 CSS，但你可以用变量、混合（.mixin）和嵌套让断点管理更可控、不易出错。
用变量统一管理断点值
硬编码像素值在多个 @media 中重复出现，改起来容易漏。把断点定义成变量，一处修改，全局生效：
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1200px;
.container {
width: 100%;
@media (min-width: @breakpoint-md) {
width: 750px;
}
@media (min-width: @breakpoint-lg) {
width: 970px;
}
}
注意：@media 内部不能直接写 @breakpoint-md + 1px 这类运算（Less 不支持单位参与加减），如需偏移，提前算好或用函数封装。
用参数化混合封装常用断点逻辑
重复写 @media (min-width: ...) 很啰嗦，抽成混合后，调用更简洁，也方便后期切换为 max-width 或加 screen and 前缀：
立即学习“前端免费学习笔记（深入）”；
.media-min(@bp) {
@media (min-width: @bp) {
@content();
}
}
.card {
padding: 1rem;
.media-min(@breakpoint-md) {
padding: 1.5rem;
}
.media-min(@breakpoint-lg) {
padding: 2rem;
}
}
- 混合里用了
@content()，所以能嵌套任意样式规则，不是只能塞单条声明 - 不要在混合名里硬编码尺寸（比如叫
.media-md），否则新增断点就得加新混合；用.media-min这种语义名更灵活 - 如果项目需兼容旧版 IE（需要
screen and），混合里直接补上：@media screen and (min-width: @bp)
嵌套时避免生成冗余选择器链
Less 允许在 @media 内部继续嵌套选择器，但容易写出深层嵌套，导致 CSS 选择器过长、难以覆盖，甚至触发浏览器性能警告：
.header {
background: #333;
@media (min-width: @breakpoint-lg) {
&__logo {
float: left;
&--large {
width: 200px;
}
}
}
}
上面这段会编译出：@media (min-width: 992px) { .header__logo { ... } .header__logo--large { ... } }，看起来没问题，但一旦 .header__logo--large 需要在其他上下文复用，就受限于这个嵌套路径。更稳妥的做法是把响应式样式“提一层”：
.header__logo {
width: 120px;
@media (min-width: @breakpoint-lg) {
width: 200px;
}
}
.header__logo--large {
width: 200px;
@media (min-width: @breakpoint-xl) {
width: 240px;
}
}
这样每个 class 的响应行为独立、可预测，也方便后续用 JS 切换 class 控制状态。
不要依赖 Less 编译时做设备探测
有人误以为可以用 @media screen and (hover: hover) 或 (prefers-color-scheme: dark) 配合 Less 变量做“编译时适配”，这是行不通的。Less 是构建时预处理器，所有 @media 条件都原样输出，实际匹配完全由浏览器运行时决定。
也就是说：@media (prefers-color-scheme: dark) 在 Less 里就是字面量，不会因为你在深色模式下编译就多输出一套规则——它始终存在，只是浏览器决定是否启用。
真正容易被忽略的是：多个相邻 @media 块会被 Less 合并（如果条件完全相同），但带不同断点的不会合并；如果你手动写了 @media (min-width: 768px) 和 @media screen and (min-width: 768px)，它们会被当成两个独立规则，CSS 文件里就真会出现两段——别指望 Less 帮你去重。
