应在Less中用比例制定义全局间距变量，如@spacing-unit: 4px并派生@spacing-1、@spacing-2等，避免无上下文命名；须确保variables.less先于其他文件导入，且不可依赖:root CSS变量实现编译时计算。
如何在Less中定义全局间距变量
Less本身不提供“布局系统”概念，所有CSS变量管理都靠@variables和.mixins手动组织。真正能统一控制间距的，是人为约定一套命名+层级结构，比如@spacing-xs、@spacing-sm这类基础值，再用@spacing-base作为基准推导其他值。
- 别直接写
@margin: 12px这种无上下文的变量——后期根本不知道它用在哪，是否可复用 - 推荐用比例制：设
@spacing-unit: 4px，然后定义@spacing-1: @spacing-unit * 1、@spacing-2: @spacing-unit * 2……这样缩放、主题切换都方便 - 避免在
@import顺序里漏掉变量文件——如果layout.less先于variables.less被引入，所有@spacing-*都会报variable is undefined
为什么不能只靠:root CSS自定义属性
Less编译发生在构建时，而:root { --spacing-sm: 8px; }是运行时生效的。如果你在Less里写margin: var(--spacing-sm)，它不会参与计算、不能被lighten()或unit()处理，也无法用于for循环生成类名。
- 需要动态计算（如
padding: @spacing-sm * 1.5）？必须用Less变量，不是CSS变量 - 想支持暗色模式切换？得配合JS切换class或重载CSS变量，但Less层无法响应——这是职责分离，不是缺陷
- 混合使用时注意优先级：
margin: @spacing-sm（编译后是固定值）比margin: var(--spacing-sm)（运行时读取）更早确定，别指望后者覆盖前者
用配置对象模拟“主题配置”管理间距
Less没有原生配置对象，但可以用嵌套@map模拟，比如定义@spacing-config为一个带键值对的结构，再通过extract()或get()（需自定义函数）读取。不过更实际的做法是用命名空间+作用域隔离：
.spacing {
@base: 4px;
@xs: @base * 1;
@sm: @base * 2;
@md: @base * 3;
@lg: @base * 4;
}
然后在具体模块里用.spacing[@sm]引用（需开启math: always并配合extract()），但多数项目直接展开更清晰：
- 把
.spacing写成.spacing() { ... }mixin，调用时传参.spacing(sm)，内部用if()分支返回对应值 - 如果项目已用Webpack，建议把间距配置抽成JSON，用
less-plugin-functions或自定义JS函数注入，避免硬编码 - 警惕
@import "config/spacings"路径拼错——Less报错信息里只会说File not found，不会提示你在哪一行写的错路径
生成间距工具类时容易忽略的响应式断点耦合
很多人用for循环批量生成.m-1、.p-2等工具类，却忘了这些类默认是“全屏生效”。一旦需要在md断点后重置间距，就必须让类名携带断点前缀，比如.m-md-2。
- 不要单独维护两套变量：一套给组件用，一套给工具类用——它们应该共用
@spacing-sm等源变量 - 生成工具类时，
for循环里的@i要配合unit(@i, px)显式加单位，否则margin: @i会编译成margin: 2（非法CSS） - 如果用
@media (min-width: 768px)包裹工具类，注意Less嵌套深度——太多层会导致输出CSS选择器过长，影响浏览器匹配性能
事情说清了就结束。真正的难点不在怎么写变量，而在团队是否遵守同一套语义命名和缩放规则；没人维护的@spacing-jumbo比没写的还危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
