真正复用less混合需参数化+条件分支+作用域隔离：带默认参数的混合（如.btn-style(@color: #007bff)）、when条件判断、显式传参避免外部变量污染；extend用于静态语义归类，mixin用于动态样式生成；&表示当前层级父选择器，空格决定连接或后代关系；变量须前置声明并用!default设默认值。
Less混合（mixin）怎么写才真正复用，而不是复制粘贴
混合不是把几行CSS包起来就完事。真正复用的关键在于：参数化 + 条件分支 + 作用域隔离。
常见错误是写成这样：.btn-style() { color: #333; border: 1px solid #ccc; }——看着省事，实际换颜色、改边框宽度时还得另写一个，反而更乱。
- 带默认参数的混合才可控：
.btn-style(@color: #007bff, @border-width: 1px) { color: @color; border: @border-width solid desaturate(@color, 20%); } - 用
when做条件判断，避免生成冗余CSS：.size(@s) when (@s = small) { font-size: 12px; } .size(@s) when (@s = large) { font-size: 18px; } - 混合内部别直接引用外部变量，容易被意外覆盖；需要时显式传参
继承（extend）和混合混着用，什么时候该选哪个
extend本质是选择器合并，生成的CSS更紧凑；mixin是内容复制，更灵活但体积略大。二者不是替代关系，是协作关系。
典型误用：用extend去“复用”带参数的样式——它不支持参数，硬套只会报错Extend doesn't support interpolation or variable names。
- 用
extend处理「静态语义归类」：比如所有警告类都应继承.alert-base，就写.warning { &:extend(.alert-base); } - 用
mixin处理「动态样式生成」：按钮尺寸、主题色、响应式断点切换 - 混合里可以调用
extend，但反过来不行；所以复杂组件建议以混合为主干，局部用extend收口公共基类
嵌套规则下，& 符号怎么用才不掉坑
&不是简单的“父选择器占位符”，它是当前选择器链的完整快照。理解这点，才能避开80%的嵌套爆炸问题。
比如.card { &__title { ... } &.is-active { ... } }，编译后是.card__title和.card.is-active——注意中间没空格，这是关键。
-
&后面不加空格 = 连接（如&:hover→.btn:hover） -
&后面加空格 = 后代（如& .icon→.btn .icon） - 多层嵌套时
&只代表“当前层级”的父级，不会自动回溯到最外层；需要外层作用域时，提前用变量存：@parent: ~".card"; @{parent}__footer { ... }
变量作用域和@import顺序对复用的影响
Less变量不是全局常量，它的值取决于「首次声明位置」和「当前作用域可见性」。很多样式冲突，根源其实是变量被后导入文件悄悄覆盖了。
比如variables.less里定义@primary-color: #007bff;，但theme-dark.less在它之后@import并重写了同一变量——所有前面已编译的混合都会按新值重新计算，但开发者往往意识不到。
- 基础变量（颜色、间距、z-index等）必须放在所有
@import最前面，且禁止在组件文件里重复声明同名变量 - 混合定义文件（如
mixins.less）应紧随变量之后，确保它能读到最新变量值 - 用
!default只在提供默认值时用：@spacing-sm: 4px !default;；生产环境配置文件里直接赋值，不要加!default
真正难的不是语法，是让不同人写的模块在变量、混合、继承之间不互相踩脚。边界得划清楚：变量管“值”，混合管“行为”，extend管“关系”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
