直接用.media-up()类mixin能省80%重复@media块，前提是断点存map、参数用关键字、显式调用@content()；否则编译静默失效，浏览器查不到样式。
直接用 .media-up() 这类 Mixin 能省掉 80% 的重复 @media 块，但前提是断点存 map、参数用关键字、@content() 显式调用——否则编译无声失效，浏览器里根本查不到样式。
断点必须存成 map，不能硬编码像素值
硬写 @media (min-width: 768px) 看似快，改设计稿时得全局搜索替换，还容易拼错单位或漏改某处。真正可维护的做法是统一定义：
@breakpoints: { xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px };- Mixin 内部用
map-get(@breakpoints, @size)取值，而不是@@size或字符串拼接 - 所有断点值必须严格递增，避免
767px / 768px留出 1px 空隙导致样式不生效
调用时必须用关键字，不能传字符串
.media-up("md") 会报错：Expected variable, function or keyword。Less 不支持运行时解析字符串为变量名。
- 正确写法是
.media-up(md)，其中md是关键字（key），不是字符串 - Mixin 定义里要加守卫：
.media-up(@size) when (isdefined(@breakpoints))，否则断点没引入时整段静默跳过 - 别混用大小写：
MD和md在 map 中是不同 key，漏掉守卫就查不到值
@content() 必须显式声明，不能默认捕获
写成 .media-up(md) { color: red; } 不会生成任何媒体查询——因为 Mixin 内部没写 @content()，那块样式就被丢掉了。
- Mixin 定义里必须包含
@content();占位符 - 调用时必须用大括号包裹样式：
.btn { .media-up(md) { font-size: 16px; } } - 如果只想改单个属性，另写变体：
.media-up-font-size(@size, @val)，内部直接写@media规则
多条件查询别手动拼字符串
像 @media (min-width: 768px) and (orientation: landscape) 这种组合，不能让用户传 "(min-width: 768px) and (orientation: landscape)" —— 缺乏类型校验，也难 debug。
- 推荐分层嵌套：
.media-up(md) { & and (orientation: landscape) { ... } }，利用&生成合法复合查询 - 如果非要支持多参数，Mixin 内部用
~"@{conditions}"拼接，但拼接逻辑必须封装在 Mixin 里，禁止暴露给调用方 - 避免在
@media内部再嵌套@media：Less 不识别子级@media为规则，会原样输出到 CSS 中变成非法语法
最易被忽略的是：Mixins 不处理运行时响应，只负责生成静态 CSS；所有逻辑都在编译期固化，一旦漏掉 @content() 或断点 map 未加载，就彻底静默失效——连 warning 都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
