CSS如何用Less实现多维度的样式复用_结合混合与继承技术实现

真正复用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管"关系"。