应将卡片基础结构抽为.card()混入，参数化@padding、@border-radius、@box-shadow等可变项；悬停效果需独立为.card-hover()混入以遵循单一职责；主题色通过顶层变量（如@card-bg）配合媒体查询实现，避免参数重复传递。
怎么用 .card 混入统一生成卡片基础结构
Less 里不推荐每个卡片都重写边框、圆角、阴影、内边距——直接抽成混入最省事。核心是把可变部分设为参数，固定部分写死。
-
.card()本身不输出样式，必须带括号调用才生效；漏括号会编译失败但不报错，只默默忽略 - 建议至少暴露
@padding、@border-radius、@box-shadow三个参数，其他如背景色、边框宽按项目规范决定是否开放 - 别在混入里写
display: flex或grid布局——卡片内容流式还是网格化，应由使用者自己控制，混入只管“壳”
.card(@padding: 1rem, @border-radius: 8px, @shadow: 0 2px 4px rgba(0,0,0,0.1)) {
border-radius: @border-radius;
box-shadow: @shadow;
padding: @padding;
background: #fff;
border: 1px solid #e0e0e0;
}
为什么 .card-hover 混入要单独抽离而不是塞进主混入
悬停效果涉及状态变化，和基础结构属于不同关注点。合并在一个混入里会导致调用时参数爆炸，也违背单一职责。
- 常见错误：把
&:hover直接写进.card()主体，结果所有卡片无条件带悬停，无法关闭 - 正确做法是提供独立混入，比如
.card-hover(@scale: 1.02, @shadow: 0 4px 12px rgba(0,0,0,0.15))，按需叠加 - 注意 CSS 层叠顺序：先
.card()再.card-hover()，否则悬停样式可能被基础样式覆盖
如何让卡片支持主题色切换（比如深色模式）
靠变量 + 嵌套作用域实现，不是靠 JS 切 class。关键在于把颜色相关参数从混入参数移到顶层变量，再用 & when 条件判断。
- 不要这样写：
.card(@bg: #fff, @border: #e0e0e0)—— 每次调用都要传，失去主题统一性 - 应该定义
@card-bg: #fff;和@card-border: #e0e0e0;，在混入里直接引用 - 深色模式只需在
@media (prefers-color-scheme: dark)块里重定义这两个变量，整个卡片自动响应
遇到 ReferenceError: variable @xxx is not defined 怎么快速定位
这通常不是变量名拼错，而是作用域或加载顺序问题。Less 变量不具备 JS 那种提升行为。
- 检查变量是否定义在
.card混入调用之前——尤其当混入放在另一个文件里时，@import顺序很重要 - 确认没在嵌套选择器内部重复声明同名变量，比如
.card { @padding: 1.5rem; .card(); }会覆盖外部值 - 如果用了
!important覆盖变量（不推荐），Less 会静默忽略，不会报错，但结果不符合预期
混入封装的边界其实很清晰：它只管视觉容器的“形”，不管内容语义、交互逻辑、响应式断点——这些得留给组件层或 HTML 结构去处理。漏掉这点，后期改起来反而更费劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
