<p>一套变量加分层媒体查询 mixin 即可统一响应式 CSS：变量须中性命名（如 @sidebar-width-expanded）、断点抽为 @breakpoint- 变量、字体用 rem、mixin 封装媒体逻辑、严格 import 顺序、工具链校验一致性。</p>
直接用一套变量 + 分层媒体查询 mixin 就能统一移动端和 PC 端的 CSS 规范，不需要两套样式文件，也不靠 JS 动态切主题——关键在变量定义不带设备假设、媒体逻辑封装进 mixin、所有断点值只来自 @breakpoint- 变量。
变量必须脱离设备语义，只描述设计意图
写 @sidebar-width-mobile 或 @font-size-pc 是错的。这类命名把设备耦合进变量名，后续加个平板断点就得新增变量，维护爆炸。
- 正确做法是定义中性语义变量：
@sidebar-width-collapsed、@sidebar-width-expanded，再由媒体查询决定何时用哪个 - 断点本身必须抽成变量：
@breakpoint-tablet: 768px、@breakpoint-desktop: 1024px，禁止在@media里硬写像素值 - 字体大小统一用 rem 单位：
@font-size-body: 1rem，而不是@font-size-14px；这样根元素缩放时，所有文字自动响应，且不破坏行高比例 - 颜色/间距/圆角等基础值一律无设备后缀：
@color-primary、@spacing-lg、@radius-md，它们在任何设备下都代表同一设计含义
用 mixin 封装媒体查询逻辑，禁止重复写 @media
Less 不支持条件变量（比如 @sidebar-width: if(@device == 'mobile', 80vw, 260px)），所以不能把判断逻辑塞进变量赋值里。必须靠 mixin 承载响应式分支。
- 写一个通用 mixin：
.responsive-sidebar() { width: @sidebar-width-expanded; @media (max-width: @breakpoint-tablet) { width: @sidebar-width-collapsed; } } - 组件内只调用：
.nav-sidebar { .responsive-sidebar(); }，不暴露断点值或具体宽度 - 如果某组件需三段适配（手机/平板/桌面），mixin 内部叠加多层
@media，外部仍保持单点调用 - 避免嵌套
@media在选择器内部，例如.card { @media (...) { ... } }—— 这会导致编译后 CSS 中媒体查询块分散，难以全局控制顺序
import 顺序与作用域必须严格分层
变量冲突和覆盖大多源于 import 顺序混乱，尤其是不同模块各自引入局部 variables.less。
立即学习“前端免费学习笔记（深入）”；
- 项目只允许一个
variables.less，放在src/style/根目录，所有其他文件通过@import "variables.less"引入（后缀不可省略） - import 顺序强制为：
variables.less→mixins.less→base.less→components/→pages/，index.less统一管控 - mixins.less 里所有响应式 mixin 必须基于
@breakpoint-变量编写，不得引用任何组件级变量（如@header-height） - 业务组件文件禁止
@import其他组件的变量文件，否则会污染作用域，导致@color-primary在 A 组件里是 #1677ff，在 B 组件里被重定义成 #00b42a
构建时检查断点一致性与变量误用
光靠人工约定容易漏，得靠工具链卡住。重点不是压缩体积，而是防止规范在协作中失效。
- 用 stylelint 配
less/less-at-import-no-missing-extension和less/less-variable-no-undefined，拦截未声明变量和错误 import - CI 流程中加脚本扫描所有
@media出现位置，校验是否全部使用@breakpoint-变量，而非字面量（如768px） - 运行
lessc --lint检查语法，它能发现变量未定义、括号不匹配等低级错误，比等上线才发现样式丢失更早 - 最易被忽略的是：移动端和 PC 端共用同一套
@font-size-变量时，若团队成员在 mixin 里擅自写font-size: @font-size-body * 1.2，就会绕过设计系统——这种乘法计算必须禁用，只允许传参调整
