less混合需用private命名、参数传值、外壳封装、禁用&:hover嵌套；变量须统一管理、local前缀、禁块级定义、慎用!default；避免extend，改用class组合；输出时用namespace、显式类名、strict模式、purgecss。
Less混合（mixin）怎么写才能真正隔离组件样式
混合不是套个.btn()就完事——关键得让它的CSS作用域锁死在组件内部。否则全局污染、变量覆盖、编译后样式错乱全是常态。
实操要点：
- 所有混合定义必须用
private命名约定（如.__button-base()），避免被外部意外调用 - 混合内部不直接写
color: @primary;这类裸变量，改用参数传入：.button(@bg: #007bff, @radius: 4px) { background: @bg; border-radius: @radius; } - 如果要复用基础样式但又不想暴露细节，用
.button() { .__button-base(); }做一层壳，把私有混合藏起来 - 别在混合里写
&:hover嵌套——它会随调用位置泄漏父选择器，导致生成.card .btn:hover这种意料外的层级
如何防止Less变量跨组件污染
一个@text-color在header.less里是#333，在modal.less里变成#555，编译后只剩最后一个生效——这不是Less的问题，是你没管住变量作用域。
解决方式很直白：
- 根级变量（如主题色）统一放
variables.less，且只用@import (reference)引入，它不输出CSS也不参与变量覆盖 - 组件内变量全用
local前缀：@local-padding: 12px;，明确告诉自己“这玩意儿出不了这个文件” - 禁止在
.component { @size: 14px; font-size: @size; }这种块级作用域里定义变量——Less不支持块级变量，它实际还是全局的 - 用
!default要谨慎：@text-color: #333 !default;看似安全，但只要任意地方提前声明了@text-color，后面所有!default都失效
为什么用extend代替class继承容易翻车
:extend(.btn) 看起来省代码，但编译后可能把.btn所有规则（包括你根本没想继承的margin或display）全拷过去，而且无法覆盖中间态。
真实风险点：
-
extend不支持参数，没法做条件分支，比如“只继承颜色不继承边框”做不到 - 如果
.btn本身用了extend链式继承，你的组件会一并继承整条链，调试时根本看不出样式从哪来 - Webpack + Less-loader开启
math=always时，extend可能和计算表达式冲突，报Recursive extend错误 - 更稳的做法是：用混合封装可配置行为，再用
class="btn btn--primary"组合，靠CSS优先级控制，而不是靠Less编译时硬塞
组件样式输出时怎样避免生成冗余选择器
Less默认把每个.component { ... }编译成独立CSS规则，但如果你在组件里写了&__title或&.is-active，嵌套层级一深，选择器就爆炸——.card .card__header .card__title.is-active这种东西既难维护又影响性能。
压缩输出的关键动作：
- 用
namespace包裹整个组件样式：.card { .__header { ... } .__title { ... } }，再配合extract函数（需自定义）抽离为扁平类名，而非依赖嵌套 - 禁用
&符号的隐式拼接，显式写全类名：.card__title { ... }而不是&__title，避免编译器猜错上下文 - Webpack中配置
lessOptions.math = 0（即strict模式），能提前拦截掉因运算符歧义导致的选择器重复生成 - 上线前跑一遍
purgecss，Less编译产物里的死类名它清不掉，但至少能砍掉JS没用到的部分
混合封装不是为了少写几行代码，而是为了下次改button圆角时，不用翻三页确认有没有哪个modal-footer偷偷继承了它的border-radius。变量、选择器、继承逻辑——每一层都要有明确的“边界感”，否则封装就成了套娃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
