Less变量是统一多屏颜色/间距/字体的唯一靠谱解法，需定义清晰命名的全局变量（如@color-primary）、断点变量（如@breakpoint-tablet）、rem单位字体变量，并用mixin封装响应式逻辑，避免硬编码和作用域错误。
怎么让不同屏幕尺寸下的颜色/间距/字体保持统一
靠人肉记忆和复制粘贴肯定不行，改一处漏十处。Less 的变量是唯一靠谱的解法——把所有设计系统里的基础值抽成 @color-primary、@spacing-md、@font-size-lg 这类命名清晰的变量，全项目只维护一份。
常见错误是把响应式断点也硬编码进每个媒体查询里，比如反复写 @media (max-width: 768px)。正确做法是提前定义 @breakpoint-tablet: 768px，后续全部用 @media (max-width: @breakpoint-tablet)。这样以后要调整个数，改一个地方就行。
- 变量名别用模糊词，比如
@blue改成@color-brand-blue，避免和@color-info-blue冲突 - 字体大小变量建议用 rem 单位，比如
@font-size-base: 1rem，方便配合根元素缩放做响应式适配 - 别在变量里塞 calc() 或函数调用，Less 变量不支持运行时计算，
@spacing-xs: calc(0.5rem * 2)会直接报错
如何复用同一套变量适配移动端和桌面端的布局逻辑
不是靠一套变量“撑满”所有设备，而是用变量组合出可切换的规则。比如侧边栏宽度，在桌面端是固定 @sidebar-width-desktop: 260px，在移动端变成 @sidebar-width-mobile: 80vw，再通过媒体查询切换使用哪组值。
容易踩的坑是把断点判断写进变量定义里，Less 不支持条件变量（没有 if/else），所以不能写 @sidebar-width: if(@screen == 'mobile', 80vw, 260px)。必须用 mixin 封装逻辑：
立即学习“前端免费学习笔记（深入）”；
.sidebar-width() {
width: @sidebar-width-desktop;
@media (max-width: @breakpoint-tablet) {
width: @sidebar-width-mobile;
}
}然后在组件里调用 .sidebar-width()，而不是直接写 width: @sidebar-width。
- 所有涉及响应式变化的尺寸、颜色、阴影等，都该拆成两套变量 + 一套 mixin 控制开关
- 避免在 mixin 里重复定义变量，变量声明必须放在最外层作用域，否则会被覆盖或找不到
- 如果项目用 Webpack + less-loader，记得开启
javascriptEnabled: true才能用@import (reference)引入变量文件而不输出 CSS
为什么 @import "variables.less" 有时不生效
根本原因是 Less 的作用域规则：变量只在定义它的作用域及子作用域可见。如果 variables.less 是用 @import (reference) 引入的，它不会注入变量到当前文件；如果没加 (reference) 却又在多个文件里重复 @import，会导致变量被多次重定义，后一次覆盖前一次。
正确姿势是只在入口文件（比如 main.less）里用普通 @import "variables.less"，其他所有文件都用 @import (reference) 引入通用模块（如 mixins、reset），确保变量只加载一次且全局可用。
- 检查浏览器开发者工具里编译后的 CSS，如果看到未解析的
@color-primary，说明变量根本没加载进来 - VS Code 装了 Easy LESS 插件也不代表编译正常，得看构建工具（如 gulp-less、less-loader）是否真把变量文件纳入了处理链
- 路径别写相对路径拼接，统一用
@import "~styles/variables"这种别名方式，避免因文件位置变动导致引用失效
移动端适配中 rem + viewport + Less 变量怎么协同工作
核心是让根字体大小（html { font-size }）动态变化，其他所有基于 rem 的变量（@spacing-sm: 0.5rem）自动缩放。Less 本身不处理运行时逻辑，所以得靠 JS 控制根字号，Less 只负责把所有尺寸写成 rem 单位。
典型错误是试图在 Less 里用 JS 获取屏幕宽度来设 font-size，这完全不可行。正确分工是：JS 根据 window.innerWidth 设置 document.documentElement.style.fontSize，Less 文件里所有间距、圆角、内边距全部用 rem 表达，比如 padding: @spacing-md，而 @spacing-md 定义为 1rem。
- 别在 Less 里写像素值混用，比如
border: 1px solid @color-border，1px 是物理像素，不会随 rem 缩放，应该统一用@border-width: 0.0625rem - viewport meta 标签必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，否则 iOS Safari 会强制放大，JS 计算的根字号就失效 - 测试时别只看 Chrome 模拟器，真机上某些安卓 WebView 对 rem 解析有偏差，建议用
getComputedStyle(document.documentElement).fontSize实时验证
实际最难的不是写变量，是说服团队所有人改掉直接写死像素的习惯，以及守住变量命名和引入路径的纪律。一旦松动，一致性就从根上瓦解。
