.mixin()调用越多css体积越大，因其是编译期文本展开，每次调用均复制整块样式；应拆分为细粒度mixin、善用.extend()、启用压缩与去重，并加强跨团队命名约定。
为什么.mixin()调用越多，CSS体积反而越大
Less 的 mixin 是编译期文本展开机制，不是运行时复用。每次调用 .btn(@color)，都会把整块样式原样复制一遍，哪怕只改了一个颜色值。多个按钮变体（.btn-primary、.btn-danger、.btn-outline）各自调用一次，就生成三份几乎相同的 padding、border-radius、transition 声明。
常见错误是把一个大而全的 .button-base() 当万能模板塞进所有组件里，结果编译后 CSS 里满屏重复的 display: inline-flex 和 user-select: none。
- 嵌套层级深 + 多次 mixin 调用 → 选择器爆炸 + 样式块重复
- 没拆分语义单元，比如把「尺寸」「状态」「主题」揉在一个 mixin 里 → 无法按需组合，只能全量展开
- 在响应式断点内重复调用同一 mixin → 每个媒体查询里都塞一份相同规则
用 .extend() 替代部分 mixin 调用
当目标只是让多个选择器共用一套静态声明（如禁用态、隐藏类、清浮动），extend 编译后只输出一份 CSS 规则，选择器用逗号合并，体积更小。
例如：.form-control:disabled:extend(.disabled) 和 .btn:disabled:extend(.disabled) 最终只生成一次 .disabled, .form-control:disabled, .btn:disabled { opacity: .6; cursor: not-allowed; }。
- 必须确保被 extend 的基类是纯类名（不能含伪类、属性选择器或组合符），否则编译失败
-
.disabled:hover:extend(.disabled)是错的；正确写法是基类自带状态：.disabled { &:hover { ... } }，再让其他类 extend 它 - Webpack 中使用
less-loader时，建议显式配置math: 'strict'，避免extend因数学模式解析异常而静默失效
拆分 mixin 为细粒度、无副作用的单元
一个带 5 个参数的 .card(@bg, @shadow, @radius, @pad, @border) 很难复用，也容易因某一项改动导致整块重编译。不如拆成 .card-bg()、.card-shadow-sm()、.card-padding-md() 等独立单元。
每个单元只做一件事，且不依赖外部变量（避免作用域污染），调用时按需组合：
.profile-card {
.card-bg();
.card-shadow-sm();
.card-radius-md();
.card-padding-lg();
}
- 细粒度 mixin 更易缓存和复用，比如
.flex-center()可能在按钮、弹窗、卡片中都被调用，但只展开一次逻辑 - 禁止在 mixin 内部重新定义同名变量（如
@radius: 4px），否则会覆盖上层作用域，引发不可预期的样式覆盖 - 高频使用的原子 mixin（如
.text-truncate()）建议用!important或命名空间前缀隔离，防止被其他样式意外覆盖
启用 Less 编译压缩与重复检测
默认编译保留嵌套结构、空行和注释，还会把同一 mixin 在不同文件中多次展开。生产环境必须启用压缩和优化选项。
- 命令行编译加
--clean-css或--compress参数，直接去除空格和冗余分号 - Webpack 中配置
less-loader的options.math = 'strict'和options.javascriptEnabled = false，关闭危险特性，减少意外展开 - 使用
postcss-discard-duplicates插件对最终 CSS 做二次去重（注意：它不能识别语义等价但写法不同的规则，如margin: 0vsmargin: 0 0 0 0）
真正难控制的不是单个 mixin 是否重复，而是跨文件、跨组件的隐式耦合——比如两个团队各自写了 .btn-reset()，编译后变成两份一模一样的重置规则。这类问题只能靠约定 + 工具链检查，没法靠 Less 语法自动解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
