Less本身不自动将padding/margin等长写属性合并为缩写，需人工在源码中直接使用缩写形式，并配合stylelint规则（如declaration-block-no-redundant-longhand-properties）拦截反模式，辅以团队规范强制执行。
Less里怎么让padding/margin自动转成缩写？
Less本身不自动把padding-top、padding-right等拆开声明合并成padding，它只做变量替换和嵌套展开。缩写得靠人工约定+构建阶段后处理，不是编译器功能。
真正起效的方式是：在Less源码中直接写缩写形式，配合lint工具拦截反模式。比如禁止出现padding-left单独声明，强制用padding: 10px 20px;。
- 用
stylelint配declaration-block-no-redundant-longhand-properties规则，报错提示“冗余的长写属性” - 团队代码规范文档里明确写死：“所有
padding/margin/border必须用缩写，例外需加// eslint-disable-line注释” - 别指望
.pad(@t, @r, @b, @l) { padding: @t @r @b @l; }这种mixin能“自动转换”，它只是封装调用入口，源头写法没变照样膨胀
为什么mixins封装transform却反而增大CSS体积？
当你写.rotate(@deg) { transform: rotate(@deg); }并在多个地方调用，Less会原样输出多条transform: rotate(...)，而不是合并成一个规则——它不分析语义，只做文本拼接。
真正减少体积的做法是用:extend()复用，但前提是被继承的选择器必须真实存在于最终CSS中。
立即学习“前端免费学习笔记（深入）”；
- 正确姿势：
%rotate-base { transform: rotate(0); }+.btn:extend(%rotate-base); .icon:extend(%rotate-base); - 错误姿势：每个组件都定义自己的
.rotate-45mixin，结果生成10个重复的transform: rotate(45deg) - 注意
%占位符必须顶层声明，不能嵌套在.card { %inner {} }里，否则编译失败
如何避免background相关属性因拆写导致体积翻倍？
background-color、background-image、background-position分开写，比background: #fff url(...) center;多出2~3倍字符量，且浏览器解析更慢。
Less没法强制合并，但可以设防。
- 禁用
background-color等子属性的独立声明，统一走.bg(@color, @img, @pos)mixin，内部用background: @color @img @pos; - 对已有项目跑正则搜索：
background-(color|image|position|repeat|size)，批量替换成缩写形式 - 警惕
background: url(...) no-repeat center;里漏了background-color——透明背景在部分安卓WebView下渲染异常，得补上background: #fff url(...) no-repeat center;
压缩阶段哪些缩写会被clean-css误删？
--clean-css默认开启--advanced时会尝试合并border: 1px solid #000和border-width: 2px，但若后者来自不同文件或媒体查询内，可能错位覆盖。
更危险的是font缩写：font: 14px/1.4 "Helvetica"若被拆成font-size+line-height+font-family再重拼，可能丢掉font-weight默认值（浏览器按normal算，但某些字体需要400显式声明）。
- 解决方案：在
lessc命令里加--clean-css="--skip-imports --compatibility 'ie9'"，关掉激进合并 - 关键字段加
/*! */注释保底，比如/*! font: 14px/1.4 "Helvetica" !*/ - 上线前用
css-validator.org扫一遍，重点看font、background、transition是否被意外简化
@import开始，到最后一行background结束，每处都要有人盯。 
