Less中.mixin()用于参数化样式复用，:extend()在编译期合并选择器以减小CSS体积，二者解决不同问题，需配合变量与严格工程约束才能发挥架构价值。
Less 的 .mixin() 和 :extend() 不是“比原生 CSS 类组合更高级”，而是解决两类不同问题：前者在编译期做文本替换或选择器合并，后者在构建阶段就消除冗余；而原生类组合（如 class="btn btn-primary"）靠运行时 DOM 结构叠加，无法压缩、不可推断、调试链路长。
混合（.mixin()）适合带参数的样式复用
当你要给多个组件加同一套可配置的边框、阴影或过渡效果时，.mixin() 是唯一能传参的方案。原生 CSS 没有“函数式样式调用”能力，var(--shadow-sm) 只能固定一值，没法写 shadow(2px, 4px, #000, 0.1) 这种动态表达。
-
.border(@w, @s, @c) { border: @w @s @c; }调用时填什么就输出什么，不依赖 HTML class 名称 - 避免把逻辑下推到模板层——不用让每个
都手动拼class="border-1px-solid-blue" - 参数顺序必须严格匹配，
.border(solid, #ccc)会报错，因为第一个参数是@w（宽度），不能跳过 - 别用
@arguments滥传一堆参数，.btn(@bg, @color, @hover-bg, @hover-color, @border)实际等于放弃语义，不如拆成.btn-base+.btn-primary
:extend() 能真正减少最终 CSS 体积
原生类组合（比如同时加 class="reset text-center"）会导致浏览器渲染时反复匹配多个独立规则；而 :extend() 在编译期就把选择器合并，生成 .reset, .text-center, .header { ... }，最终 CSS 文件更小、CSSOM 构建更快。
- 必须精确匹配源选择器：
.card .title只能被:extend(.card .title)继承，写成:extend(.title)静默失败 - 媒体查询内定义的样式，只能被同 media 块里的
:extend()匹配，跨块无效 -
all关键字慎用：它会让.highlight:extend(.base all)同时匹配.base、.section .base、.base.active，容易意外覆盖第三方样式 - 嵌套块里不能直接
:extend()局部选择器，.modal { .header { color: red; } .content:extend(.header) { ... } }会失效——基类必须提成全局作用域
变量+混合+继承三者配合才体现 Less 架构价值
单独看 .mixin() 或 :extend() 都像“多此一举”，但和变量联动后，它们构成可验证、可收敛的样式契约。比如 @primary-color 定义在 base/variables.less，所有 .btn-primary 的背景色、边框色、文字色都来自它；改一个值，所有地方自动同步，且 CI 能用 grep -r "@primary-color" src/ | grep -v "base/variables.less" 拦住非法重定义。
- 变量漏
@import "base/variables.less"？编译不报错，但输出全是默认值，肉眼难排查 -
:extend()和.mixin()混用会导致选择器爆炸：既写.btn:extend(.reset)又写.btn { .reset(); }，结果是两份.reset规则 -
@import无作用域，子模块重复@import "mixins.less"会导致* { box-sizing: border-box }出现多次，最终 CSS 体积膨胀
真正关键的不是“要不要用”，而是你能否守住变量收口、禁止子模块重定义、禁用 @import (multiple)、强制根文件统一引入——这些约束一旦松动，Less 的优势立刻反转为协作灾难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
